【工作】van-list 分页查询数据切换页面后滑动位置保留

背景

应用场景为从A页面点击到B页面，B页面操作后自动回到A页面，A页面滑动位置保留且对应项数据更新。

想法

数据是分页请求的，页面滑动也需要基于所有数据都拿到后。
1.在A页面点击某一项Item时，记录当前滑动位置scroll
2.在返回到A页面时，scroll有值，展示loading（要不然页面自己搜搜往下滑好奇怪）
3.监听滑动，如果滑动高度curScroll与scroll相同，loading隐藏

另外的想法

因为会多个请求，考虑可以一个请求，把分页参数pageSize修改为需要请求的数量。目前这样分页请求，会出现滑动停顿滑动停顿的反复，虽然loading展示，但是也可以看到这么一个交互。

实现

<van-list 
	ref="lists" 
	v-model="isLoading" 
	:finished="finished" 
	finished-text="没有更多了" 
	class="order-list" 
	@load="onLoad"
>
      <div 
      	v-for="item in items" 
      	:key="item.id"  
      	@click="showDetailAction(item)"
      >
      	<!--xxx展示逻辑--!>
      </div>
    </van-list>

// 记录当前滑动位置
showDetailAction(item) {
  	this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
}

activated() {
   if (this.scrollTop) this.showLoading = true;
   this.$refs.lists.check();
 },

// 监听滑动
mounted () {
   window.addEventListener('scroll', () => {
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
       if (scrollTop === this.scrollTop) {
           this.showLoading = false;
       }
   })
},

// 在每一次的请求中
if (this.scrollTop && this.showLoading) {
   setTimeout(() => {
       document.body.scrollTop = document.documentElement.scrollTop = this.scrollTop;
   }, 600)
}

交流

如果大家有更好的实现方式，欢迎评论一起交流👏👏👏