小程序点击返回顶部

时间:2020-06-29 11:11:43   收藏:0   阅读:63

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>

原文:https://www.cnblogs.com/meiyanstar/p/13206529.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!