小程序 页面刷新后自动滚回到页面某一位置：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就可以实现不改动分页加载的情况下，找到正确位置。

1. 子组件点击触发函数addItem，参数传回父组件将当前点击列表的序号写入currentAdd，触发页面数据刷新，并将页面滚动标识anchorChange设为true。
2. 页面列表数据重载后，子组件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>