• 💌 所屬專欄：【微信小程序開發教程】

• 😀 作??者：我是夜闌的狗🐶

• 🚀 個人簡介：一個正在努力學技術的CV工程師，專注基礎和實戰分享 ，歡迎咨詢！

• 💖 歡迎大家：這里是CSDN，我總結知識的地方，喜歡的話請三連，有問題請私信 😘 😘 😘

文章目錄

• 前言
• 一、上拉觸底案例
• • • 1、案例效果
• 二、獲取隨機顏色
• 三、在頁面加載時獲取初始數據
• 四、渲染 UI 結構并美化頁面效果
• 五、上拉觸底時獲取隨機顏色
• 六、添加 loading 提示效果
• 七、對上拉觸底進行節流處理
• 總結

---

前言

??大家好，又見面了，我是夜闌的狗🐶，本文是專欄【微信小程序開發教程】專欄的第27篇文章;
??今天開始學習微信小程序的第15天💖💖💖，開啟新的征程，記錄最美好的時刻🎉，每天進步一點點。
??專欄地址：【微信小程序開發教程】， 此專欄是我是夜闌的狗微信小程序開發過程的總結，希望能夠加深自己的印象，以及幫助到其他的小伙伴😉😉。
??如果文章有什么需要改進的地方還請大佬不吝賜教👏👏。

---

一、上拉觸底案例

??前面已經學習了頁面事件–上拉觸底，通過栗子學習了上拉觸底的監聽觸發和配置上拉底距。接下來就來通過案例詳細了解上拉觸底事件。話不多說，讓我們原文再續，書接上回吧。

1、案例效果

??可以先來看一下要實現的效果圖，圖中有隨機背景顏色的box，如下所示：

??想要實現上面的那個效果，實現步驟可分為 6 個步驟：

• Step 1、首先定義獲取隨機顏色的方法；
• Step 2、通過 onLoad 函數在頁面加載時獲取初始數據；
• Step 3、獲取數據之后，將其渲染在 UI 結構并美化頁面效果；
• Step 4、在上拉觸底時調用獲取隨機顏色的方法；
• Step 5、給上拉觸底添加 loading 提示效果；
• Step 6、對上拉觸底進行節流處理，防止請求沒完成之前，下一個請求觸發；

二、獲取隨機顏色

??首先來定義獲取隨機顏色的方法，具體代碼如下：

contact.js

??這里 colorList 數組要保留新舊數據一起，所以賦值的時候要采用拼接方式進行。

Page({/*** 頁面的初始數據*/data: {colorList: []},/*** 獲取隨機顏色*/getColors() {wx.request({url: 'https://www.escook.cn/api/color',method: 'GET',success: ({data: res}) =>{console.dir(res);this.setData({colorList: [...this.data.colorList, ...res.data]})}})},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {this.getColors();}, })

??可以來看一下控制臺有沒有打印出數據：

三、在頁面加載時獲取初始數據

??在定義完隨機獲取顏色的方法之后，就要在頁面加載的時候來獲取了，具體代碼如下：

contact.js

??這里 colorList 數組要保留新舊數據一起，所以賦值的時候要采用拼接方式進行。

Page({/*** 生命周期函數--監聽頁面加載*/onLoad(options) {this.getColors();}, })

??點擊 AppData 也能看到 colorList 數組也被賦值了。

四、渲染 UI 結構并美化頁面效果

??能獲取數據之后，接下里就是將數據展示在頁面上并對頁面樣式進行美化，因為要將 colorList 數組渲染在頁面上，所以要用 wx:for 來進行實現，具體代碼如下：

contact.wxml

??注意這里不要忘記給 wx:key 賦值 ，其中還通過style動態綁定背景顏色。

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

contact.wxss

??對樣式進行美化。

.num-item{/* 邊框線 */border: 1rpx solid #efefef;/* 邊框圓角 */border-radius: 8rpx;line-height: 200rpx;margin: 20rpx;text-align: center;/* 文本樣式 */text-shadow: 0rpx 0rpx 5rpx #fff;box-shadow: 1rpx 1rpx 6rpx #aaa; }

??可以來看一下實際效果：

五、上拉觸底時獲取隨機顏色

??這個就比較簡單了，只要在上拉監聽函數再次調用 getColors() 方法即可

contact.js

Page({/*** 頁面上拉觸底事件的處理函數*/onReachBottom() {this.getColors();}, })

??可以來看一下運行效果：

??這里可以發現首次進來頁面的時候，colorList 數組只有10個數據，當進行上拉觸發監聽的時候，colorList 數組發生了改變。

六、添加 loading 提示效果

??這里可以先查看 官方文檔 了解一下顯示 loading 提示框的函數 wx.showLoading(Object object)，這里簡單學習該函數的參數：

屬性類型默認值必填說明

title	string		是	提示的內容
mask	boolean	false	否	是否顯示透明蒙層，防止觸摸穿透
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

注意：

• 需主動調用 wx.hideLoading 才能關閉提示框；
• wx.showLoading 和 wx.showToast 同時只能顯示一個；
• wx.showLoading 應與 wx.hideLoading 配對使用；

??接下來就為頁面添加 loading 提示，具體代碼如下：

contact.js

Page({/*** 獲取隨機顏色*/getColors() {// 展示 loading 效果wx.showLoading({title: '數據加載中...',})wx.request({url: 'https://www.escook.cn/api/color',method: 'GET',success: ({data: res}) =>{console.dir(res);this.setData({colorList: [...this.data.colorList, ...res.data]})},complete: () =>{// 隱藏 Loading 效果wx.hideLoading();}})}, })

??當數據加載完成之后就觸發 complete 回調關掉 Loading 提示框。

七、對上拉觸底進行節流處理

??當連續觸底多次，就會引發不必要的問題。所以需要在上拉監聽函數做節流處理，如果當前請求正在請求數據，后續發送的請求都應該進行屏蔽。當前沒有數據請求的時候，才可以允許發起下一頁的請求。

??節流處理可分為以下步驟：

• Step 1、在 data 中定義 isloading 節流閥

??isloading 為布爾值，false 表示當前沒有進行任何數據請求，可以請求， true 表示當前正在進行數據請求，重新觸發的下一頁請求都要被屏蔽。

• Step 2、在 getColors() 方法中修改 isloading 節流閥的值

??當開始發起請求時，調用 getColors 時將節流閥設置 true，數據請求完成之后，在網絡請求的 complete回調函數中，將節流閥重置為 false。

• Step 3、在 onReachBottom 中判斷節流閥的值，從而對數據請求進行節流控制

??如果節流閥的值為 true，則阻止當前請求。如果節流閥的值為 false，則發起數據請求。

??具體代碼如下：

contact.js

Page({/*** 頁面的初始數據*/data: {colorList: [],isLoading: false},/*** 獲取隨機顏色*/getColors() {this.setData({isLoading: true})// 展示 loading 效果wx.showLoading({title: '數據加載中...',})wx.request({url: 'https://www.escook.cn/api/color',method: 'GET',success: ({data: res}) =>{console.dir(res);// 將新老數據拼接在一起this.setData({colorList: [...this.data.colorList, ...res.data]})},complete: () =>{// 隱藏 Loading 效果wx.hideLoading();// 請求完成，將isLoading置為falsethis.setData({isLoading: false})}})},/*** 頁面上拉觸底事件的處理函數*/onReachBottom() {// 對后續的數據請求進行節流if(this.data.isLoading) return;this.getColors();}, })

??可以來看一下運行效果：

??從圖中可以看到，當數據正在加載的時候，節流閥 isLoading 被置為 true，當后續上拉觸發數據請求時，由于前面的請求沒有完成，就會自動屏蔽掉。

---

總結

??感謝觀看，這里就是上拉觸底 - 案例的學習，如果覺得有幫助，請給文章點個贊吧，讓更多的人看到。🌹 🌹 🌹

??也歡迎你，關注我。👍 👍 👍

??原創不易，還希望各位大佬支持一下，你們的點贊、收藏和留言對我真的很重要！！！💕 💕 💕 最后，本文仍有許多不足之處，歡迎各位認真讀完文章的小伙伴們隨時私信交流、批評指正！下期再見。🎉

更多專欄訂閱:

• 😀 【LeetCode題解（持續更新中）】
• 🚝 【Java Web項目構建過程】
• 💛 【微信小程序開發教程】
• ? 【JavaScript隨手筆記】
• 🤩 【大數據學習筆記（華為云）】
• 🦄 【程序錯誤解決方法（建議收藏）】
• 🚀 【軟件安裝教程】

訂閱更多，你們將會看到更多的優質內容！！

總結

以上是生活随笔為你收集整理的【微信小程序】-- 页面事件 - 上拉触底 - 案例（二十七）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。