小程序页面刷新后自动滚回到页面某一位置：scroll-view中scroll-into-view的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序页面刷新后自动滚回到页面某一位置：scroll-view中scroll-into-view的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

情景描述：编辑一长列表时，需要重刷页面，希望重刷后自动跳转回原位置。

遇到的问题：分页情况下，固定的scroll-into-view值无法唤起加载更多。

uniapp官网中scroll-view描述如下：

scroll-view | uni-app官网 (dcloud.io)https://uniapp.dcloud.io/component/scroll-view.html#scroll-view不多赘述，直接上最终代码，首先这个anchor的取值是不能用‘ - ’ 此类特殊字符，偷懒用item.id当anchor报的错。其次，这个anchor是动态的，不光是指它是一个变量，还指页面滑动时anchor值不停变化，一次性的anchor设置在数据未加载全时未能通过id找到准确位置，我们通过变化的anchor就可以实现不改动分页加载的情况下，找到正确位置。文章来源地址https://www.toymoban.com/news/detail-489641.html

子组件点击触发函数addItem，参数传回父组件将当前点击列表的序号写入currentAdd，触发页面数据刷新，并将页面滚动标识anchorChange设为true。
页面列表数据重载后，子组件item重置，触发watch，判断anchorChange为true则调用changeAnchor函数修改anchor使页面不停往下滑，直到当前位置大于目标位置index>currentAdd，将滚动标识anchorChange设为false。

<!-- 父组件 -->
<template>
	<view class="warp">
        <scroll-view scroll-y slot="body" :scroll-into-view="anchor" :show-scrollbar="false" @scrolltolower="reachBottom" class="scroll-box none-scrollbar">
		    <product-item :id="'pro'+index" :currentAdd="currentAdd" v-for="(item,index) in itemList" :anchorChange="anchorChange" :item="item" :key="index" :index="index"></product-item>
		    <u-loadmore :status="status" />
	    </scroll-view>
    </view>
</template>
<script>
    import ProductItem from './components/product-item.vue' ;
    export default {
		components: {
			ProductItem,
		},
        provide(){
			return {
                addItem:this.addItem,
				changeAnchor:this.changeAnchor,
                changeAnchorStatus:this.changeAnchorStatus,
			}
		},
        data() {
			return {
				anchor:'',
                anchorChange:false,
                currentAdd:-1,//触发页面刷新的点击项index
                status: "loadmore",
            }
        }，
        methods:{
			changeAnchor(anchor){
				this.anchor = anchor
			},
			changeAnchorStatus(){
				this.anchorChange = false
			},
            addItem(item,index){
				this.currentAdd = index
				this.anchorChange = true
				this.initData()
			},
            initData(){
                //重刷列表数据
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
	<view class="info-scroll">
		<view class="u-m-b-10 u-flex u-row-between">
			<view class="u-m-r-10 u-font-24">
				<text class="u-m-r-10 $u-type-primary" style="text-decoration: underline;" @click="addItem(item,index)">新增盘点</text>
				|
				<text @click="ensure"  class="u-m-l-10 $u-type-primary" style="text-decoration: underline;">确认数量</text>
			</view>
		</view>
		......
	</view>
</template>

<script>
	export default {
		props:['item','index','recheck','anchorChange','currentAdd'],
		inject:['addItem','changeAnchor','changeAnchorStatus'],
		watch: {
			item:{
				handler(nVal, oVal) {
					//新增盘点项刷新页面后滑动到原位置停止
					if(this.anchorChange){
						if(this.index>this.currentAdd){
							this.changeAnchorStatus()
						}
						this.changeAnchor('pro'+this.index)
					}
					this.$forceUpdate()
				},
				immediate: true
			}
		}
	}
</script>

到了这里，关于小程序页面刷新后自动滚回到页面某一位置：scroll-view中scroll-into-view的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！