小程序回到顶部按钮(不依赖scroll-view) onReachBottom可用

最新推荐文章于 2024-08-12 11:07:58 发布

qq_34596092

最新推荐文章于 2024-08-12 11:07:58 发布

阅读量6.8k

点赞数

分类专栏：微信小程序文章标签：小程序回到顶部按钮 scroll-view

本文链接：https://blog.csdn.net/qq_34596092/article/details/79643955

版权

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

1 篇文章 0 订阅

订阅专栏

实现原理: 用bindtouchmove获取WXML节点信息的相关函数,获取顶部滚动出去的距离,从而控制返回顶部按钮的显示/隐藏

<view class="container" bindtouchmove="handletouchmove">
    ...
</view>

<!-- 返回顶部按钮 -->
<view class='gotop' wx:if="{{showGoTop}}" bindtap='backToTop'>
 
</view>

Page({
  data:{
    showGoTop: false,
  },
  handletouchmove: function () {
    this.queryMultipleNodes();
  },
  //获取屏幕滚动出去的高度
  queryMultipleNodes: function () {
    var self = this;
    var query = wx.createSelectorQuery()
    query.select('#container').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      res[0].top       // 节点的上边界坐标
      //如果顶部的距离超过300   就显示GoTop按钮
      if(res[0].top < -300) {
        self.setData({
          showGoTop: true
        })
      }
      else {
        self.setData({
          showGoTop: false
        })
      }
    })
  },
  //返回顶部
  backToTop: function () {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 400
    });
    this.setData({
      showGoTop: false
    })
  }
})

这种方式可以不适用scroll-view组件, 所以不影响 onReachBottom的使用