1、第一种最简单:
使用scroll-top回到顶部
<!-- 回到顶部-->
<view class="back-top-box">
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
data:
scrollTop: 0 //回到顶部
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
注意位置!不是写在methods方法里!而是和onshow和onLoad等并列
2、第二种方法:
设置目标节点
在需要的时候。调用这个方法即可。这个方法需要设置目标节点的标签名
/**
* 回到顶部
*/
backTop(){
// 回到顶部
uni.createSelectorQuery().select(".item-list")
.boundingClientRect(data => { //目标节点
uni.createSelectorQuery().select(".record-page")
.boundingClientRect((res) => { //最外层盒子节点
uni.pageScrollTo({
duration: 0, //过渡时间必须为0,uniapp bug,否则运行到手机会报错
scrollTop: res.top - data
.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
})
}).exec()
}).exec();
},