微信小程序之判断页面滚动方向

崔晓明发布于2019-08-23 11:35 / 820人阅读

摘要：需求微信小程序中如果判断页面滚动方向解决方案用到微信小程序获取页面实际高度监听用户滑动页面事件。

需求

微信小程序中如果判断页面滚动方向？

解决方案

1.用到微信小程序API

获取页面实际高度 nodesRef.boundingClientRect([callback])
监听用户滑动页面事件onPageScroll。

2.获取页面实际高度

    /* JS */
  // 封装函数获取ID为box的元素实际高度 
  getScrollHeight: function() {
    wx.createSelectorQuery().select("#box").boundingClientRect((rect) => {
      this.setData({
        scrollHeight: rect.height
      })
      console.log(this.data.scrollHeight)
    }).exec()
  },
  // 假设数据请求
  getDataList: function() {
    wx.request({
      url: "test.php", //仅为示例，并非真实的接口地址
      success: function(res) {
      // 如果该元素下面的数据是动态获取的，此方法在wx.request请求成功的回调函数中调用
        this.getScrollHeight()
      }
    })
  },

3.监听用户滑动页面事件

    //监听用户滑动页面事件
  onPageScroll: function(e) {
   
    if (e.scrollTop <= 0) {
     // 滚动到最顶部
      e.scrollTop = 0;
    } else if (e.scrollTop > this.data.scrollHeight) {
      // 滚动到最底部
      e.scrollTop = this.data.scrollHeight;
    }
    if (e.scrollTop > this.data.scrollTop || e.scrollTop >= this.data.scrollHeight) {
      //向下滚动 
      console.log("向下 ", this.data.scrollHeight)
    } else {
      //向上滚动 
      console.log("向上滚动 ", this.data.scrollHeight)
    }
    //给scrollTop重新赋值 
    this.data.scrollTop=e.scrollTop
    
  },

参考：微信小程序如何判断页面上下滚动

云服务器 GPU服务器页面滚动方向微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97161.html

小爱童鞋@你，一起来撸个小程序吧

摘要：轮播图区域这里微信小程序给我们提供了组件，直接用就可以了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局首页商品展示区这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用遍历出来。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

MiracleWong 2019-08-29 15:40 评论0 收藏0
小爱童鞋@你，一起来撸个小程序吧

摘要：轮播图区域这里微信小程序给我们提供了组件，直接用就可以了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局首页商品展示区这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用遍历出来。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

Pink 2019-08-22 17:59 评论0 收藏0
初探uni-app框架踩坑

摘要：近些天有接触到框架，使用软件进行编译，能生成多端项目文件，如微信百度支付宝小程序及和端，记录遇到的问题条件编译我觉得比较突出的一点功能，就是这个条件编译，指定对应的代码执行在对应的一端仅在某平台存在除了某平台均存在如只在微信小程序中才执行近些天有接触到uni-app框架，使用HBuilderX软件进行编译，能生成多端项目文件，如微信、百度、支付宝小程序及Android和ios端，记录...

neu 2019-08-26 10:15 评论0 收藏0
微信小程序之选项卡

摘要：我们在函数中通过获取设备的宽高来设置组件高度以及高度为导航栏的高度点击导航栏切换内容点击切换滑动内容切换导航栏滑动切换可滚动区域滚动最底刷新数据页面上拉触底事件的处理函数更新列表一个漂亮的选项卡就完成了完整案例选项卡随处可见，微信小程序中也不例外，下面来写一个简单的小程序选项卡思路之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件...

stormjun 2019-08-23 11:49 评论0 收藏0