需求
小程序页面加载显示数据过多条后，需要一个回到顶部的按钮，一开始隐藏，下拉到一定高度才显示，点击回到顶部再隐藏。
代码
wxml代码
<view style='position:fixed;right:15rpx;bottom:26rpx;width:70rpx;height:70rpx;border-radius:0;z-index:994;background:#fff;border-radius:50%;border:1px solid #cacaca;display:flex;flex-direction:column;align-items: center;opacity:0.5' wx:if="{{goTopStatus}}"bindtap='goToTop'>
<image src='http://cos.qkmai.com/qkmbb/ytal/toptb.png' style='width:50rpx;height:auto;margin-top:10rpx' mode='widthFix'></image>
</view>
js代码
//监听页面高度(上滑或者下滑)
onPageScroll: function(obj) {
if (obj.scrollTop > 363) {
this.setData({
goTopStatus: true
})
}
},
goToTop: function() {
wx.pageScrollTo({
scrollTop: 0,
})
this.setData({
goTopStatus: false
})
}
知识点
-
onPageScroll页面滚动触发事件的处理函数 - wx.pageScrollTo({}) 参数包含滚动到页面的目标位置(单位px),滚动动画时长，接口调用成功失败完成
具体可查看微信官方文档
