小程序开发-页面事件之上拉触底实战案例

🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页： 长风清留杨的博客
🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。
✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战
🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

上拉触底

实战案例

下面我们将通过一个案例来实战的演示一下上拉触底的使用。话不多说我们现在就开始

步骤详解

在实现这个小程序实战案例的过程中，我们遵循了以下六个核心步骤。这些步骤不仅涵盖了基础的开发流程，还融入了一些优化技巧，以提升用户体验和性能。

步骤一：定义获取随机颜色的方法

为了实现多样化的视觉效果，我们首先定义了一个获取随机颜色的方法。这个方法能够生成不同颜色值，为后续步骤中的颜色变化提供支持。通过随机颜色的应用，我们可以增加小程序的趣味性和视觉吸引力。

步骤二：在页面加载时获取初始数据

当小程序页面加载时，我们需要从服务器或本地存储中获取初始数据。这些数据可能包括用户信息、配置项或其他必要的资源。通过合理的数据请求和处理逻辑，我们可以确保页面在加载时能够迅速呈现所需内容。

步骤三：渲染UI结构并美化页面效果

获取到初始数据后，我们开始渲染小程序的UI结构。这一步骤涉及布局设计、组件选择和样式调整等方面。同时，我们会对页面进行美化处理，以提升整体视觉效果和用户体验。通过合理的UI设计和交互优化，我们可以让用户更加轻松地理解和使用小程序。

步骤四：在上拉触底时调用获取随机颜色的方法

为了实现无限滚动的效果，我们需要在用户上拉触底时触发数据加载操作。在这个过程中，我们会再次调用之前定义的获取随机颜色的方法，以为新加载的内容提供不同的颜色。这种设计不仅能够增加页面的趣味性，还能让用户在使用过程中保持新鲜感。

步骤五：添加loading提示效果

在数据加载过程中，为了避免用户产生等待焦虑，我们会在页面上添加loading提示效果。这个提示可以是一个简单的进度条、旋转图标或文本提示等。通过明确的加载提示，我们可以让用户了解当前的状态，并期待即将呈现的内容。

步骤六：对上拉触底进行节流处理

由于用户可能会频繁地触发上拉触底操作，我们需要对上拉触底事件进行节流处理。节流处理能够限制事件的触发频率，从而避免因为过多请求而导致的性能问题。通过合理的节流策略，我们可以确保小程序在保持良好响应速度的同时，也能满足用户的滚动需求。

定义获取随机颜色的方法

在index.js文件中，通过使用GET请求，请求该网址：https://applet-base-api-t.itheima.net/api/color’ 来获取随机的颜色信息，

// 使用 Page 方法定义页面
Page({// 页面的初始数据data:{// 用于存储从服务器获取的颜色数据的数组colorlist:[]},// 定义一个方法，通过 GET 请求访问指定网址，随机获取颜色数据request_get() {// 调用微信小程序的 wx.request 方法来发起网络请求wx.request({/*** 请求的 URL 地址，该地址的返回信息是一个数组，数组中是五个随机的颜色*  */ url: 'https://applet-base-api-t.itheima.net/api/color',// 请求的方法，这里是 GET 方法method: 'GET',// 请求成功的回调函数，res 是响应对象/*** success 是请求成功之后的回调函数，当请求URL成功之后会执行success函数* data是URL返回的结果对象，这里重命名为res*/success: ({data : res}) => {// 更新页面的 data，将新获取的颜色数据合并到 colorlist 数组中this.setData({// 使用展开运算符 ... 来合并数组，将每次获取到的颜色信息跟colorlist数组中原本存在的信息合并colorlist:[...this.data.colorlist,...res.data]})}})}
})

1. 页面定义：
   • 使用 Page 方法定义了一个页面，该方法接收一个对象作为参数，该对象定义了页面的初始数据、方法以及生命周期函数。
2. 初始数据：
   • 在 data 属性中，定义了一个空数组 colorlist，用于存储从服务器获取的颜色数据。
3. 请求颜色数据的方法 (request_get)：
   • 使用 wx.request 方法发起网络请求，请求的 URL 是 ‘https://applet-base-api-t.itheima.net/api/color’，请求方法是 GET。
   • 在请求成功的回调函数中，使用 this.setData 方法更新 colorlist 数组。这里使用了数组的展开运算符（…）来合并原有的 colorlist 数组和从服务器获取的新数据。但这里有一个潜在的问题：如果 res.data 不是一个数组，或者其结构不符合预期，这将导致错误。但是我们这里只是作为演示，我们事先就知道获取的新数据是一个数组类型的

在页面加载时获取初始数据

当页面刚加载时就获取到颜色信息，那么就需要使用页面监听函数了 onLoad，当页面刚加载的时候就会执行onLoad函数，我们直接在onLoad函数中调用request_get方法就可以在页面刚加载的时候就获取到颜色信息了

/*** 生命周期函数--监听页面加载* 当页面加载时，调用 request_get 方法来获取颜色数据*/
onLoad:function(options){//调用request_get方法this.request_get()
}

渲染UI结构并美化页面效果

现在我们需要在index.wxml页面上展示出获取到的颜色，把或许到的颜色数组渲染到view中，然后再对页面进行一些简单的美化

index.wxml文件：

<view class="box">
案例
</view>
<!-- 使用 wx:for 循环遍历 colorlist 数组，每一项用 item 表示，wx:key 使用 index 作为唯一标识，提高列表渲染性能。为每个元素应用类名 "num-item"，并通过 style 动态设置背景颜色，背景颜色使用 rgba 格式，给出了 rgba 的前三个参数（红、绿、蓝）。把数组中获取到的颜色的值赋值进去
-->
<view wx:for="{{colorlist}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

index.wxss文件：

/* index.wxss 样式表 */
/* 
.num-item 类样式定义
边框：1rpx宽的实线，颜色为#efefef
边框圆角：8rpx
行高：200rpx，这会影响元素内文本的垂直居中
外边距：15rpx，为元素四周提供空间
文本对齐：居中对齐
文本阴影：水平偏移0rpx，垂直偏移0rpx，模糊半径5rpx，颜色为#fff（白色），用于增强文本可读性
盒阴影：水平偏移1rpx，垂直偏移1rpx，模糊半径6rpx，颜色为#aaa（浅灰色），用于给元素添加立体效果
*/
.num-item {border: 1rpx solid #efefef; /* 边框样式修正为 solid */border-radius: 8rpx;line-height: 200rpx;margin: 15rpx;text-align: center;text-shadow: 0rpx 0rpx 5rpx #fff;box-shadow: 1rpx 1rpx 6rpx #aaa;
}/* 
.box 类样式定义
字体大小：190px，注意这里使用的是 px 单位而不是 rpx，如果需要在微信小程序中保持自适应，应使用 rpx
由于 px 是绝对单位，它不会根据屏幕宽度自动缩放，而 rpx 会
如果这里确实需要非常大的字体（尽管 190px 在手机上可能看起来过大），这里我们是为了确保首次加载页面的时候请求获取的颜色能够铺满整个页面
*/
.box {font-size: 190px; /* 注意：这里使用的是 px 单位 */
}

在上拉触底时调用获取随机颜色的方法

为了实现无限滚动的效果，我们需要在用户上拉触底时触发数据加载操作。在这个过程中，我们会再次调用之前定义的获取随机颜色的方法，以为新加载的内容提供不同的颜色。这种设计不仅能够增加页面的趣味性，还能让用户在使用过程中保持新鲜感。

/*** 页面相关事件处理函数--监听页面上拉触底事件的处理函数* 当用户滚动页面到底部时，调用 request_get 方法来获取更多颜色数据*/
onReachBottom: function() {//调用获取随机颜色的方法this.request_get()
}

添加loading提示效果

在数据加载过程中，为了避免用户产生等待焦虑，我们会在页面上添加loading提示效果。这个提示可以是一个简单的进度条、旋转图标或文本提示等。通过明确的加载提示，我们可以让用户了解当前的状态，并期待即将呈现的内容。

描述

wx.showLoading(Object object)

基础库 1.1.0 开始支持，低版本需做兼容处理。
以 Promise 风格 调用：支持
小程序插件：支持，需要小程序基础库版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac 版：支持
微信 鸿蒙 OS 版：支持

功能

wx.showLoading显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

参数

属性	类型	默认值	必填	说明
title	string	提示的内容	否	标题
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function	-	否	接口调用成功的回调函数
fail	function	-	否	接口调用失败的回调函数
complete	function	-	否	接口调用结束的回调函数（调用成功、失败都会执行）

语法示例

wx.showLoading({title: '数据加载中...',
})setTimeout(function () {wx.hideLoading()
}, 2000)

当遇到请求的时候，先使用showLoading，页面上会显示loading动画，并且显示 数据加载中... 这段文字

当数据请求完毕之后，就使用hideLoading关闭loading的显示

本案例中使用

// 定义一个方法，通过 GET 请求访问指定网址，随机获取颜色数据
request_get() {// 显示加载提示，告诉用户数据正在加载中wx.showLoading({// 显示加载动画时，动画中展示的文字title: '数据加载中...',})/** 使用 setTimeout 函数延迟 2 秒后执行网络请求（通常不推荐这样做，除非有特定需求）这里是作为演示，能够比较直观的看到请求等待中的动画效果*/setTimeout(() => {// 调用微信小程序的 wx.request 方法来发起网络请求wx.request({/*** 请求的 URL 地址，该地址的返回信息是一个数组，数组中是五个随机的颜色*  */ url: 'https://applet-base-api-t.itheima.net/api/color',// 请求的方法，这里是 GET 方法method: 'GET',// 请求成功的回调函数，res 是响应对象/*** success 是请求成功之后的回调函数，当请求URL成功之后会执行success函数* data是URL返回的结果对象，这里重命名为res*/success: ({data : res}) => {// 更新页面的 data，将新获取的颜色数据合并到 colorlist 数组中this.setData({// 使用展开运算符 ... 来合并数组，将每次获取到的颜色信息跟colorlist数组中原本存在的信息合并colorlist:[...this.data.colorlist,...res.data]})},// 请求完成的回调函数（无论成功还是失败都会执行）complete:()=>{// 隐藏加载提示wx.hideLoading()}})},2000)// 延迟时间为 2000 毫秒（2 秒）
}

主要观察在什么时候使用了wx.showLoading和什么时候使用了wx.hideLoading,在刚进入request_get方法的时候，就在页面上展示Loading动画，让用户等待，下面就开始请求URL中的数据，请求完毕之后获取到数据了，在使用wx.hideLoading在结束页面的Loading动画

对上拉触底进行节流处理

由于用户可能会频繁地触发上拉触底操作，我们需要对上拉触底事件进行节流处理。节流处理能够限制事件的触发频率，从而避免因为过多请求而导致的性能问题。通过合理的节流策略，我们可以确保小程序在保持良好响应速度的同时，也能满足用户的滚动需求。

节流就是当用户一直向下滑动会一直触发上拉触底事件，为了防止频繁触发，就通过节流的方法，在当前请求没有结束之前，不管触发多少次上拉触底事件，都不会重复请求

// 使用 Page 方法定义页面
Page({// 页面的初始数据data:{// 用于存储从服务器获取的颜色数据的数组colorlist:[],isloding: false // 可以发起网络数据请求},// 定义一个方法，通过 GET 请求访问指定网址，随机获取颜色数据request_get() {//设置为true表示正在发起网络请求,当开始请求时将isloding设置为truethis.setData({isloding: true})// 显示加载提示，告诉用户数据正在加载中wx.showLoading({// 显示加载动画时，动画中展示的文字title: '数据加载中...',})/** 使用 setTimeout 函数延迟 2 秒后执行网络请求（通常不推荐这样做，除非有特定需求）这里是作为演示，能够比较直观的看到请求等待中的动画效果*/setTimeout(() => {// 调用微信小程序的 wx.request 方法来发起网络请求wx.request({/*** 请求的 URL 地址，该地址的返回信息是一个数组，数组中是五个随机的颜色*  */ url: 'https://applet-base-api-t.itheima.net/api/color',// 请求的方法，这里是 GET 方法method: 'GET',// 请求成功的回调函数，res 是响应对象/*** success 是请求成功之后的回调函数，当请求URL成功之后会执行success函数* data是URL返回的结果对象，这里重命名为res*/success: ({data : res}) => {// 更新页面的 data，将新获取的颜色数据合并到 colorlist 数组中this.setData({// 使用展开运算符 ... 来合并数组，将每次获取到的颜色信息跟colorlist数组中原本存在的信息合并colorlist:[...this.data.colorlist,...res.data]})},// 请求完成的回调函数（无论成功还是失败都会执行）complete:()=>{// 隐藏加载提示wx.hideLoading()//设置为false表示可以发起网络请求,当请求结束时将isloding设置为False表示可以继续请求this.setData({isloding: false})}})},2000)// 延迟时间为 2000 毫秒（2 秒）},/*** 生命周期函数--监听页面加载* 当页面加载时，调用 request_get 方法来获取颜色数据*/onLoad:function(options){//调用request_get方法this.request_get()},/*** 页面相关事件处理函数--监听页面上拉触底事件的处理函数* 当用户滚动页面到底部时，调用 request_get 方法来获取更多颜色数据*/onReachBottom: function() {//当前触发了页面上拉触底事件时，先判断isloding的值是否为true，如果为true就表示当前已经再请求数据了，不能再次请求，直接return退出，如果不为true，那么表示当前没有在请求，那就直接进入到request_get方法中去请求,这就是节流if(this.data.isloding) return //调用获取随机颜色的方法this.request_get()}
})

完整代码

index.wxml文件

<!-- 列表渲染 -->
<view class="box">
案例
</view>
<!-- 使用 wx:for 循环遍历 colorlist 数组，每一项用 item 表示，wx:key 使用 index 作为唯一标识，提高列表渲染性能。为每个元素应用类名 "num-item"，并通过 style 动态设置背景颜色，背景颜色使用 rgba 格式，给出了 rgba 的前三个参数（红、绿、蓝）。把数组中获取到的颜色的值赋值进去
-->
<view wx:for="{{colorlist}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

index.wxss文件

/* index.wxss 样式表 */
/* 
.num-item 类样式定义
边框：1rpx宽的实线，颜色为#efefef
边框圆角：8rpx
行高：200rpx，这会影响元素内文本的垂直居中
外边距：15rpx，为元素四周提供空间
文本对齐：居中对齐
文本阴影：水平偏移0rpx，垂直偏移0rpx，模糊半径5rpx，颜色为#fff（白色），用于增强文本可读性
盒阴影：水平偏移1rpx，垂直偏移1rpx，模糊半径6rpx，颜色为#aaa（浅灰色），用于给元素添加立体效果
*/
.num-item {border: 1rpx solid #efefef; /* 边框样式修正为 solid */border-radius: 8rpx;line-height: 200rpx;margin: 15rpx;text-align: center;text-shadow: 0rpx 0rpx 5rpx #fff;box-shadow: 1rpx 1rpx 6rpx #aaa;
}/* 
.box 类样式定义
字体大小：190px，注意这里使用的是 px 单位而不是 rpx，如果需要在微信小程序中保持自适应，应使用 rpx
由于 px 是绝对单位，它不会根据屏幕宽度自动缩放，而 rpx 会
如果这里确实需要非常大的字体（尽管 190px 在手机上可能看起来过大），这里我们是为了确保首次加载页面的时候请求获取的颜色能够铺满整个页面
*/
.box {font-size: 190px; /* 注意：这里使用的是 px 单位 */
}

index.js文件

// 使用 Page 方法定义页面
Page({// 页面的初始数据data:{// 用于存储从服务器获取的颜色数据的数组colorlist:[]},// 定义一个方法，通过 GET 请求访问指定网址，随机获取颜色数据request_get() {// 显示加载提示，告诉用户数据正在加载中wx.showLoading({// 显示加载动画时，动画中展示的文字title: '数据加载中...',})/** 使用 setTimeout 函数延迟 2 秒后执行网络请求（通常不推荐这样做，除非有特定需求）这里是作为演示，能够比较直观的看到请求等待中的动画效果*/setTimeout(() => {// 调用微信小程序的 wx.request 方法来发起网络请求wx.request({/*** 请求的 URL 地址，该地址的返回信息是一个数组，数组中是五个随机的颜色*  */ url: 'https://applet-base-api-t.itheima.net/api/color',// 请求的方法，这里是 GET 方法method: 'GET',// 请求成功的回调函数，res 是响应对象/*** success 是请求成功之后的回调函数，当请求URL成功之后会执行success函数* data是URL返回的结果对象，这里重命名为res*/success: ({data : res}) => {// 更新页面的 data，将新获取的颜色数据合并到 colorlist 数组中this.setData({// 使用展开运算符 ... 来合并数组，将每次获取到的颜色信息跟colorlist数组中原本存在的信息合并colorlist:[...this.data.colorlist,...res.data]})},// 请求完成的回调函数（无论成功还是失败都会执行）complete:()=>{// 隐藏加载提示wx.hideLoading()}})},2000)// 延迟时间为 2000 毫秒（2 秒）},/*** 生命周期函数--监听页面加载* 当页面加载时，调用 request_get 方法来获取颜色数据*/onLoad:function(options){//调用request_get方法this.request_get()},/*** 页面相关事件处理函数--监听页面上拉触底事件的处理函数* 当用户滚动页面到底部时，调用 request_get 方法来获取更多颜色数据*/onReachBottom: function() {//调用获取随机颜色的方法this.request_get()}
})

演示效果