微信小程序返回顶部及获取滑动距离

最新推荐文章于 2023-10-07 17:40:24 发布

刺心疯

最新推荐文章于 2023-10-07 17:40:24 发布

阅读量1.7k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_42363090/article/details/95644963

版权

微信小程序专栏收录该内容

121 篇文章 12 订阅 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了微信小程序中如何实现页面返回顶部功能和获取滑动距离。通过onPageScroll函数，可以监测屏幕滑动的距离。同时，展示了在数据中设置scrollTop属性，并定义点击返回顶部的方法。

摘要由CSDN通过智能技术生成

获取滑动距离

微信小程序有一个为 onPageScroll 的函数，可以获取到当前滑动屏幕的距离。

onPageScroll: function(res) {
    console.log(res);
},

滑动距离打印如下：
在这里插入图片描述
返回顶部

1、先在data里边设置scrollTop:0

2、点击点击返回顶部的方法，如下：

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