uniapp将页面滚动到目标位置/返回顶部
这里分享其中两种方式,仅供参考~
方式一:使用 pageScrollTo
backToTop() {
uni.pageScrollTo({
scrollTop: 0, // 滚动到页面的目标位置(单位px)
duration: 300 // 滚动动画的时长,默认300ms,单位 ms
});
}
方式二:使用 scroll-view
注意: 如果页面需要 下拉刷新
交互,此方式不适合。详情请看
<scroll-view scroll-y="true" :show-scrollbar="false" :scroll-with-animation = "true" :scroll-top="scrollTop" @scroll="scrollTap">
<view>
......
</view>
</scroll-view>
<script>
export default {
data() {
return {
scrollTop: 0,
}
},
methods: {
/**
* 滚动时触发事件
*/
scrollTap(e) {
this.currentScrollTop = e.detail.scrollTop;
},
backToTop() {
this.scrollTop = this.currentScrollTop;
// 在下次 DOM 更新循环结束之后 重置下
this.$nextTick(() => {
this.scrollTop = 0;
})
}
}
}
</script>