美文网首页让前端飞Web前端之路Web 前端开发
微信小程序如何判断页面上下滚动

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

作者: Brighten_Sun | 来源:发表于2018-06-14 16:30 被阅读169次

    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.haomeiwen.com/subject/nzvyeftx.html