小程序列表跳转详情页面回来还是之前滚动的高度

 一、js页面

1.在列表js文件中，调用获取数据方法后，将已经加载的列表数据保存到Storage中，在onLoad方法中清空

wx.setStorageSync('checkDataLists', this.data.dataLists)


onLoad:function(options){
    wx.setStorageSync('checkDataLists', '')
}

2.data处定义scrollTop

data: {
    scrollTop: 0,
}

3.添加页面滚动事件

// 页面滚动事件
onPageScroll: function(e) {
    // console.log(e.scrollTop,'页面上拉刷新时页面滚动高度');
    this.setData({
        scrollTop: e.scrollTop
    });
},

4.在跳转详情页面处添加wx.pageScrollTo方法并且将scrollTop传递到详情页面

// 记录当前滚动位置
wx.pageScrollTo({
    scrollTop: this.data.scrollTop,
    success: () => {
        wx.navigateTo({
        url: `/pages/check/detail?data=${selectedItem.checkId}&scrollTop=${this.data.scrollTop}`
        });
    }
});

 5.在详情页面js文件的onLoad方法接收scrollTop参数

onLoad:function(options){
    console.log(options.scrollTop,'传过来的高度');
    const scrollTop = options.scrollTop; // 获取传递过来的scrollTop值
    this.setData({
      scrollTop: scrollTop // 保存scrollTop值
    });
  },

6.在详情页面js文件的onUnload方法中返回记录的scrollTop值，这样在返回列表页面时就会接收到返回的scrollTop值

onUnload() {
    const pages = getCurrentPages();
    if (pages.length > 1) {
        const prevPage = pages[pages.length - 2];
        prevPage.setData({
            scrollTop: this.data.scrollTop
        });
    }
  },

7.在列表页面的onShow方法中打印传回来的高度，并且可以获取存入Storage中的数据，然后判断这个数据是否为空，如果不为空就赋值

 onShow(){
    console.log(this.data.scrollTop,'页面返回时的高度');
    console.log(wx.getStorageSync('checkDataLists'),'缓存的数据');
    let checkDataLists = wx.getStorageSync('checkDataLists')
    if (checkDataLists !== null && checkDataLists !== '') {
      // console.log('进入缓存存在的方法');
      let checkDataPageNo = wx.getStorageSync('checkDataPageNo')
      this.setData({
        dataLists: checkDataLists, //dataLists页面渲染的数据
        pageNo: checkDataPageNo,
        loading:false,
      })
      wx.pageScrollTo({
        scrollTop: this.data.scrollTop,
        duration: 0 // 设置滚动动画的持续时间为0毫秒
      });
      // console.log(this.data.dataLists,'缓存渲染的页面的数据');
      // console.log(this.data.pageNo,'缓存渲染的页面数');
    }else{
      //如果不存在
      // console.log('进入缓存不存在的方法');
      this.setData({
        pageNo:1,
        loading: true // 开启加载状态
      })
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 0 // 设置滚动动画的持续时间为0毫秒
      });
      this.getdata() //调用页面刷新的方法
    }
  },

二.wxml页面

在你的列表的wxml中，在列表循环的外层再添加一个scroll-view标签

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" bindscroll="onPageScroll">
</scroll-view>