微信小程序 回到顶部

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
      })
    }
  }
})