uniapp返回上一页,回到顶部实现【记录】
uniapp点击回到顶部,返回上一页时自动回到顶部实现,使用scroll-view代替uni.pageScroll回到顶部
·
⛳️: CSS样式中传入变量
😇: 鑫动了的主页 – 欢迎各位小伙伴
💗: 前端小白的成长之路,一起学习,一起成长~
在返回上一页时如果不想停留在当前位置,想点击或者自动回到顶部可以用下面的方法
注: 使用了scroll-view并设置高度时再使用 uni.pageScrollTo() 会失效
1.在scroll-view 标签设置两个属性 : @scroll和scroll-top
2.在methods 监听scroll视图层位置,视图层结束并赋值滚动条位置为-0
以下代码为简写 :
<scroll-view class="list-scroll-content" :scroll-top="scrollTop" @scroll="scroll"></scroll-view >
data () {
return:{
scrollTop: 0,
oldScrollTop:0,
}
},
onShow() {
this.Topping() //自动回到顶部
},
methods:{
scroll (e) {//记录scroll 位置
this.oldScrollTop = e.detail.scrollTop
},
Topping(){//自动回到顶部
this.scrollTop = this.oldScrollTop //视图会发生重新渲染
this.$nextTick(()=>{ //当视图渲染结束 重新设置为0
this.scrollTop = 0
})
},
}
将 T o p p i n g 定义为点击事件,那么在点击它时也会实现回到顶部。 \color{#FF0000}{ 将Topping定义为点击事件,那么在点击它时也会实现回到顶部。} 将Topping定义为点击事件,那么在点击它时也会实现回到顶部。
更多推荐
已为社区贡献2条内容
所有评论(0)