小程序点击返回顶部

wxml

<image src='../../images/agoproduct/totop.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

wxss

/* 返回顶部 */
.goTop{
    height: 72rpx;
    width: 72rpx;
    position: fixed;
    bottom: 26rpx;
    right: 31rpx;
  }

js

 data: {
    // 返回顶部
    floorstatus: true
  },
  
// 获取滚动条当前位置
onPageScroll: function (e) {
  console.log(e)
  if (e.scrollTop > 150) {
    this.setData({
      floorstatus: true
    });
  } else {
    this.setData({
      floorstatus: false
    });
  }
},
//回到顶部
goTop: function (e) {  // 一键回到顶部
  if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
    })
  }
},

 

<image src='../../images/agoproduct/totop.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
posted @ 2020-06-29 10:29  小那  阅读(190)  评论(0编辑  收藏  举报