微信小程序 回到顶部按钮滚动到特定位置出现与点击回跳功能
WXML：<view class="to_top_view" bindtap="toTop" hidden="{{!showToTop}}">
<image src="/resources/images/carBuying/to_top.png" mode="widthFix"></image>
</view>JS：
data: {
showToTop: false
},
/**
* 方法区
*/
//点击回到顶部
toTop() {
wx.pageScrollTo({
scrollTop: 0,
duration: 500,
})
},
/**
* 用户滚动页面时
*/
onPageScroll(e) {
if (e.scrollTop > 780) {
this.setData({
showToTop: true
})
} else {
this.setData({
showToTop: false
})
}
}WXSS：
.to_top_view {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 3%;
bottom: 1%;
width: 100rpx;
height: 100rpx;
z-index: 1;
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]