需求
小程序頁面加載顯示數(shù)據(jù)過多條后泉沾，需要一個回到頂部的按鈕讶舰，一開始隱藏鞍盗，下拉到一定高度才顯示，點擊回到頂部再隱藏跳昼。
代碼
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代碼
//監(jiān)聽頁面高度(上滑或者下滑)
onPageScroll: function(obj) {
if (obj.scrollTop > 363) {
this.setData({
goTopStatus: true
})
}
},
goToTop: function() {
wx.pageScrollTo({
scrollTop: 0,
})
this.setData({
goTopStatus: false
})
}
知識點
-
onPageScroll頁面滾動觸發(fā)事件的處理函數(shù) - wx.pageScrollTo({}) 參數(shù)包含滾動到頁面的目標(biāo)位置(單位px),滾動動畫時長般甲，接口調(diào)用成功失敗完成
具體可查看微信官方文檔
