微信小程序的页面滚动事件监听

微信小程序中可以通过 Page 的 onPageScroll 方法来监听页面滚动事件。具体步骤如下:

在页面的 onLoad 方法中注册页面滚动事件监听器:

bash 复制代码
Page({
  onLoad: function () {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 0
    });

    wx.showLoading({
      title: '加载中',
    });

    wx.createSelectorQuery().select('#container').boundingClientRect((rect) => {
      this.setData({
        containerHeight: rect.height
      });
      wx.hideLoading();
    }).exec();

    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });

    wx.setNavigationBarTitle({
      title: '页面标题'
    });

    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000'
    });

    wx.setTabBarBadge({
      index: 0,
      text: '1'
    });

    wx.setTabBarItem({
      index: 0,
      text: '首页'
    });

    wx.setTabBarStyle({
      color: '#000000',
      selectedColor: '#ff0000',
      backgroundColor: '#ffffff',
      borderStyle: 'black'
    });

    wx.setTopBarText({
      text: '顶部标题'
    });

    wx.setEnableDebug({
      enableDebug: true
    });

    wx.onPageScroll((event) => {
      console.log(event.scrollTop);
    });
  }
});

在 onPageScroll 方法中处理页面滚动事件。onPageScroll 方法会在页面滚动时被调用,参数 event 包含了当前页面滚动的位置信息,例如 event.scrollTop 表示当前页面滚动的距离。

需要注意的是,onPageScroll 方法只能在页面的 onLoad 方法中注册,如果需要在其他地方监听页面滚动事件,可以考虑使用 wx.createIntersectionObserver 方法来创建一个交叉观察器,或者使用第三方组件库中提供的滚动组件来实现。

相关推荐
黄华SJ520it11 小时前
连锁多门店超市小程序:单品牌多家门店,总部统一管理、门店独立接单、线上到店/配送商超系统设计与实现
小程序·系统开发
mykj155119 小时前
消费积分抵扣物业费小程序商城开发
小程序·积分商城抵扣物业费·积分商城小程序开发
云迈科技-软件定制开发2 天前
2026年湖南长沙软件定制开发公司怎么选?本地企业做APP、小程序、管理系统的合作参考
小程序
admin and root2 天前
「移动安全」安卓APP 反编译&frida脱壳技巧分享
android·开发语言·python·web安全·微信小程序·移动安全·攻防演练
m0_462803883 天前
【无标题】
微信小程序
小码哥0683 天前
从三甲综合医院到连锁诊所:医院管理小程序的场景化突围逻辑(陪诊系统-陪诊APP-陪诊小程序)
小程序·医院管理系统·陪诊小程序·陪诊系统·陪诊app
2501_916007473 天前
iOS和macOS应用程序性能分析和优化工具使用综合指南
android·macos·ios·小程序·uni-app·iphone·webview
正在走向自律3 天前
用豆包Seed Evolving打造全功能【AI智能记账】小程序,开源可落地
人工智能·小程序·开源·智能记账
小羊Yveesss4 天前
模板建站哪个平台好?模板数量之外还要比较编辑与SEO能力
大数据·人工智能·小程序
2501_916007474 天前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone