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

1、需要借助小程序的事件:onPageScroll事件。
2、需要借助的API:wx.getSystemInfoSync()。

  data :{
      scrollTop: 0
  },
  //监听屏幕滚动 判断上下滚动
  onPageScroll: function (ev) {
    var _this = this;
    //当滚动的top值最大或最小时,为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹,所以为了处理回弹,设置默认最大最小值
    if (ev.scrollTop <= 0) {
      ev.scrollTop = 0;
    } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
      ev.scrollTop = wx.getSystemInfoSync().windowHeight;
    }
    //判断浏览器滚动条上下滚动
    if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
      //向下滚动
    } else {
      //向上滚动
    }
    //给scrollTop重新赋值
    setTimeout(function () {
      _this.setData({
        scrollTop: ev.scrollTop
      })
    }, 0)
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 29,043评论 9 295
  • 什么是微信小程序 腾讯公司于2016年9月21日开始微信小程序内测,一时间小程序的讨论热度不断。网络上流传一张张小...
    centuryscr阅读 10,965评论 0 3
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 6,826评论 0 12
  • “青春”?大家不会对这两个字陌生吧。 每个人都有多彩的一段时光,这段时间就叫青春。 也许你的青春在美好中度过,但也...
    星耀音梓阅读 906评论 0 1