【微信小程序】-- 页面事件 - 上拉触底 - 案例（二十七）
-
💌 所屬專欄：【微信小程序開發教程】
-
😀 作??者：我是夜闌的狗🐶
-
🚀 個人簡介：一個正在努力學技術的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隨手筆記】
- 🤩 【大數據學習筆記（華為云）】
- 🦄 【程序錯誤解決方法（建議收藏）】
- 🚀 【軟件安裝教程】
訂閱更多，你們將會看到更多的優質內容！！
總結
以上是生活随笔為你收集整理的【微信小程序】-- 页面事件 - 上拉触底 - 案例（二十七）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 记，2013中国开发者大会(移动和游戏)
- 下一篇： 形近词1