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

思路如下:

// 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;
    }
}
复制代码

 

posted on   一名小学生呀  阅读(218)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示