零基础小程序开发——页面事件之上拉触底（保姆级教程+超详细）

零基础小程序开发——页面事件之上拉触底（保姆级教程+超详细）

页面事件

上拉触底事件

什么是上拉触底？

1. 上拉触底，这一术语专属于移动端领域。它描述的是用户在移动设备屏幕上，通过向上滑动手指来触发加载更多数据的操作行为。这种交互方式在当下众多应用中极为常见，特别是在信息流、列表页或任何需要分页加载内容的场景中。
2. 当用户浏览到页面底部，并继续向上滑动手指，此时屏幕并未真正到达物理上的底部，而是触发了一个虚拟的“触底”事件。这个事件随即会向服务器发送请求，以加载并展示更多的数据内容。通过这种方式，用户可以不断地获取新的信息，而无需手动翻页或进行其他操作。
3. 在小程序开发中，上拉触底事件是页面事件的重要组成部分。开发者需要仔细设计这一功能的触发条件、加载逻辑以及用户反馈，以确保用户能够流畅地获取所需内容，同时避免因为数据加载延迟或失败而导致的不良体验。
4. 例如在访问一些商城的时候，浏览商品信息，一直往下滑动，划到最底部，发现再用力向上滑动之后就会出现新的内容，好像进入了下一页一样，这个就是上拉触底的原理

但是在实验上拉触底的过程中，一定要把内容占满整个屏幕或者超过这个屏幕才可以提现出来，因为上拉触底本身就是滑动的时候刷到最底下之后产生效果的，从而可以进行一些翻页等功能

配置页面的上拉触底距离

可以在全局或单独的页面配置， 在app.json或页面的page.json文件中，配置onReachBottomDistance属性，该属性决定了页面上拉触底事件触发时距页面底部的距离（单位为px），默认值为50。

代码语言：javascript代码运行次数：0运行复制

{
  "window": {
    "onReachBottomDistance": 50 // 设置上拉触底触发距离
  }
}

设置成50之后，当图片中的滚动条距离页面底部还有50px的时候就会触发上拉触底

监听页面的上拉触底事件

在页面的.js文件中，通过onReachBottom方法监听上拉触底事件。 例如我们想监听index.wxml页面的上拉触底事件，那么就在index.js中配置监听上拉触底事件。

代码语言：javascript代码运行次数：0运行复制

//index.js

Page({
    // 监听上拉触底事件
    onReachBottom: function() {
        cole.log("刚刚触发了上拉触底")
    }
})

案例

监听页面的上拉触底事件，因此我们先做一个小案例演示一下，因为上拉触底需要的前提是当前页面充满了内容，然后向下滑动的时候超过的本页内容的边缘才会触发，所以我们先通过view渲染的方式将颜模块充满整个屏幕

index.wxml文件：

代码语言：javascript代码运行次数：0运行复制

<button bindtap="student_num">
    学生数+1
</button>
<view>
    <text>当前学生人数：{{ num }}</text>
</view>
<view class="box"></view>

重点是<view class="box"></view>语句

index.wxss文件：

现在对index.wxml文件中的box进行一些渲染，让它有颜，并且充满整个屏幕

代码语言：javascript代码运行次数：0运行复制

.box {
    height: 2100rpx;
    background-color: aqua;
}

index.json文件：

现在需要我们开启上拉触底的配置

代码语言：javascript代码运行次数：0运行复制

{
    "navigationBarBackgroundColor": "#ff0000", 
    "navigationBarTitleText": "：小白的大数据之旅",   
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark",
    "backgroundColor": "#0000FF",
    "onReachBottomDistance": 100
}

重点是：“onReachBottomDistance”: 100 表示触底距离是100px，当滚动条距离页面底部不足100px的时候就会触发上拉触底

index.js文件：

开启上拉触底的配置之后，下面要做的就是监听上拉触底，如果触发了上拉触底就在控制台上输出“刚才触发了上拉触底”

代码语言：javascript代码运行次数：0运行复制

//index.js

Page({
    // 监听上拉触底事件
    onReachBottom: function() {
        cole.log("刚刚触发了上拉触底")
    }
})

现在来演示一下效果，仔细看cole控制台中输出的内容，而且显示上拉触底的次数：

可以看到我们连续重复触发了好多次，但是在实际应用场景中，当用户滑动到最底部的时候触发了上拉触底功能，然后就开始请求下一页的内容，这个时候请求还没有完成，用户就又一次滑动再次触发了上拉触底功能，那么这个时候就不能再次请求了，正常情况下应该设置为当上一次触发了上拉触底功能没有结束的时候再次触发上拉触底功能不生效

优化与注意事项

1. 防止重复请求： 通过设置加载状态（如loading）来防止在用户快速上拉时触发多次请求。
2. 数据合并： 在加载更多数据时，需要将新数据追加到现有数据列表中，而不是替换现有数据。
3. 错误处理： 在实际开发中，应添加网络请求的错误处理逻辑，如请求失败时提示用户重新加载。
4. 性能优化： 对于大量数据的加载和渲染，应考虑使用分页加载、虚拟列表等技术来优化性能。
5. 用户提示： 在加载数据时，可以通过显示加载动画或提示信息来告知用户正在加载数据。
6. 滚动位置恢复： 在加载更多数据后，可能需要恢复用户之前的滚动位置，以提供良好的用户体验。这可以通过保存和恢复页面的滚动位置来实现。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-07，如有侵权请联系 cloudcommunity@tencent 删除前往查看事件小程序基础教程开发