wxml
<button class='goTop' hidden='{{!floorstatus}}' bindtap="goTop">回到顶部</button>
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
wx:if 是遇 true 显示,hidden 是遇 false 显示。
他们还有一层细微的区别:
wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。
所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。
如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。
总结
频繁切换:用 hidden。
偶尔切换:用 wx:if。
wxss
.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
background:#808080;
right: 30rpx;
border-radius: 50%;
}
js
Page({
data: {
floorstatus: false
},
// 获取滚动条当前位置
onPageScroll: function(e) {
console.log(e)
if (e.scrollTop > 100) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
},
//回到顶部
goTop: function(e) {
// 一键回到顶部
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
}
}
})