微信小程序 wx.pageScrollTo方式 实现返回顶部功能



最近 Tim 在维护微信小程序,在查看商品详情的时候发现,用户体验有些问题,再查看了长长的商品详情,想要查看顶端的参数,十分不便,于是打算追加一个返回顶部的小功能。

于是网上针对此方法,大多有两种,一种是 wx.pageScrollTo 另一种是 scroll-view来监听scroll。于是查看了方法分享,不过尝试了第一种,即实现了简单需求,于是暂没有尝试第二种,以后尝试了在分享,先分享第一种已测ok好用,可扫描识别下图进入,查看宝贝详情查看(也可以顺便另个红包,买个小海鲜尝尝)

微信小程序

干货,干货,干货,实操分享(3步即可)

wxml部分、wxss部分、js部分直接用到即可

wxml部分

<image src='图片地址' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

wxss部分

.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 150rpx;
1background: rgba(0,0,0,.3);
right: 30rpx;
border-radius: 50%;
}

js部分

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

这3步,轻松搞定,可以即使使用了,也可以查看我们的实际例子,下面就赶快实际操练起来把。

  1. 没有评论

  1. 无通告。