小程序上下滑动事件

曾经终败给现在 2022-05-09 23:18 240阅读 0赞

WXML：
    <view class='demo1'>
    滑动1
    </view>
    <view class='demo2'>
    滑动2
    </view>
     
    WXSS：
    .demo1,.demo2{
      height: 500px;
    }
     
    index.js
     
    // pages/test/test.js
    Page({
     
      /**
       * 页面的初始数据
       */
      data: {
        scrollTop: 0 
      },
     
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
     
      },
      //监听屏幕滚动 判断上下滚动  
      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) {
            console.log('向下滚动');   
           } else {
            console.log('向上滚动');  
            }  
          //给scrollTop重新赋值    
          setTimeout(function () {
            _this.setData({
              scrollTop: ev.scrollTop
            })
          }, 0)
        },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
     
      },
     
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
     
      },
     
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
     
      },
     
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
     
      },
     
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
     
      },
     
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
     
      },
     
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
     
      }
    })

转载地址:https://yiweifen.com/v-1-405622.html