列表滚动保存当前位置,跳转详情页面返回后继续当前位置

发布时间 2023-09-04 17:34:13作者: 一名小学生呀

思路如下:

// 1. 监听页面的滚动(onPageScroll 生命周期)
// scrollTop是data中定义的变量,可以将页面的滚动值赋值保存下来。

onPageScroll(e) {
    this.scrollTop = e.scrollTop;
}

 

// 2.离开当前页面时,保存到缓存中

uni.setStorage({
    key:"newsTop",
    data:this.scrollTop
})

 

// 3. 返回列表页面时,onShow函数中获取缓存值
// 注意:在onshow中如果要使用uni.pageScrollTo方法让页面滚动到指定位置,需要使用定时器才可以
uni.getStorage({ key:
"newsTop", success:(res)=> { console.log(res.data); var timer = setTimeout(()=>{ uni.pageScrollTo({ scrollTop: res.data, //距离页面顶部的距离 duration: 0 }); clearTimeout(timer); },100) } })

 

// 4.列表返回到其他页面时,则需要进行缓存的清空

onBackPress(e) {
    if(e.from == "backbutton"){
        uni.setStorage({
            key:"newsTop",
            data:0
        })
        uni.navigateBack();
        return true;
    }
}