首页 > 微信 > 详细

小程序点击返回顶部

时间:2020-06-29 11:11:43      阅读:60      评论:0      收藏:0      [点我收藏+]

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)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!