微信小程序实现监听页面滚动

要实现监听页面滚动，可以使用小程序提供的onPageScroll事件，该事件会在滚动页面触发，具体操作步骤如下：

要实现监听页面滚动，可以使用小程序提供的onPageScroll事件，该事件会在滚动页面触发，具体操作步骤如下：

1. 在 .json 文件中添加 enablePullDownRefresh 字段并设置为 true，表示该页面支持下拉刷新；
2. 在 .wxml 文件中添加要监听滚动的页面元素，并为其添加 scroll 事件；
3. 在 .js 文件中定义 onPageScroll 函数，并在页面加载时绑定页面滚动事件。

示例1：实现固定导航栏

固定导航栏是最常见的监听页面滚动的实现方式，实现方法如下：

1. 在 .wxml 文件中添加一个 view 元素作为导航栏，为其添加类名 nav；
2. 在 .wxss 文件中定义 .nav 类，设置它的 position 为 fixed，top 为 0，并设置其它样式；
3. 在 .js 文件中定义 onPageScroll 函数，在该函数中判断页面是否滚动到了导航栏下方，若是则将导航栏固定在页面顶部，否则取消固定。

<!-- .wxml -->
<view class="nav">导航栏</view>
<scroll-view scroll-y="true" bindscroll="scroll">
  <!-- 页面内容 -->
</scroll-view>

/* .wxss */
.nav {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

// .js
const navHeight = 50 // 导航栏高度
Page({
  onPageScroll: function(e) {
    if (e.scrollTop >= navHeight) {
      this.setData({
        fixedNav: true
      })
    } else {
      this.setData({
        fixedNav: false
      })
    }
  }
})

示例2：实现懒加载

懒加载可以提高页面加载速度和用户打开页面的体验，实现方法如下：

1. 在 .wxml 文件中添加一个 scroll-view 元素，为其设置滚动事件 bindscrolltolower；
2. 在 .js 文件中定义 onPageScroll 函数，在该函数中判断页面滑动到了页面底部时，触发加载更多数据的函数。

<!-- .wxml -->
<scroll-view scroll-y="true" bindscrolltolower="loadMore">
  <view wx:for="{{items}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>

// .js
Page({
  data: {
    items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  loadMore: function() {
    // 加载更多数据
    const newData = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
    this.setData({
      items: [...this.data.items, ...newData]
    })
  }
})