小程序返回顶部(代码详解)

349 阅读1分钟

wxml:

<view class='topppppp' bindtap='returnTop' wx:if="{{topFloorstatus}}">
      <image src="../../images/ScreeningProducts/gototop.png"></image> 
</view>

wxss:

.topppppp{
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  right: 35rpx;
  top: calc(65% - 135rpx);
}
.topppppp image{
  width: 100rpx;
  height: 100rpx;
}

js:

Page({
  data: {
      topFloorstatus:false
     },
 onPageScroll: function (e) {
    console.log(e)
    // console.log(e) 自己设置 滚动距离,1200
    if (e.scrollTop > 1200) {
      this.setData({
        topFloorstatus: true
      });
    } else {
      this.setData({
        topFloorstatus: false
      });
    }
  },

  returnTop(){
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
      })
    }
  }
})