🤵 作者：coderYYY
🧑 個人簡介：前端程序媛，目前主攻web前端，后端輔助，其他技術知識也會偶爾分享🍀歡迎和我一起交流！🚀（評論和私信一般會回！！）
👉 個人專欄推薦：《前端項目教程以及代碼》

?一、前言

項目開發(fā)中，如果請求后端數(shù)據(jù)過多，我們一般會進行分頁處理，而在移動端，我們一般是通過“上拉觸底”這個動作加載下一頁，如果加載最后一頁就進行提示。

🚩二、具體實現(xiàn)

🎉1.前期準備

后端需要一個分頁的加載數(shù)據(jù)接口，由前端傳頁碼、條數(shù)

 {PageIndex: 1, //頁碼PageSize: 20 //每頁大小}

🎄 2.wxml代碼

頁面顯示分幾種情況：數(shù)據(jù)已部分加載、無數(shù)據(jù)、加載中、最后一頁

  <!-- 渲染數(shù)據(jù)列表，樣式自己寫，我這里借助了vant宮格組件--><view class="list" wx:if="{{dataList.length>0}}"><van-grid column-num="3"><van-grid-item use-slot wx:for="{{ dataList}}" wx:key="index"><view class="flex items-center"><view class="text-container">{{item.Goods_Name}}</view></view></van-grid-item></van-grid></view><view wx:else><van-empty image="search" description="暫無數(shù)據(jù)" /></view><!-- 加載提示 --><view wx:if="{{loading}}" class="tips">正在加載...</view><!-- 沒有更多數(shù)據(jù)的提示 --><view wx:if="{{!loading&&!hasMoreData}}" class="tips">- 暫無更多數(shù)據(jù) -</view>

3.js代碼

  data: {// 查詢參數(shù)PageIndex: 1, //頁碼PageSize: 20, //每頁大小loading: false,// 是否加載中hasMoreData: false,// 是否還有數(shù)據(jù)dataList: [],},onLoad() {this.getList()},// 請求數(shù)據(jù)getList() {// console.log(e.detail);wx.showLoading({title: '加載中',})dataGetPage({ // 后端接口，已做了封裝，封裝方法請看我之前發(fā)過的文章PageIndex: this.data.PageIndex, //頁碼PageSize: this.data.PageSize //每頁大小}).then(res => {if (res.Data) {//  請求成功，將獲取的數(shù)據(jù)拼接到原來的數(shù)據(jù)列表中const newDataList = this.data.dataList.concat(res.Data);//  更新當前頁數(shù)和數(shù)據(jù)列表this.setData({PageIndex: this.data.PageIndex + 1,dataList: newDataList,});} else {this.setData({hasMoreData: false})if (this.data.dataList.length > 0) {} else {this.setData({dataList: [],})}}this.setData({loading: false // 加載完成，隱藏加載提示});setTimeout(() => {wx.hideLoading()}, 500);})},// 觸底onReachBottom: function () {// 調(diào)用加載下一頁的方法this.loadNextPage();},// 在頁面或組件中定義加載下一頁數(shù)據(jù)的方法loadNextPage: function () {// 如果正在加載中，避免重復加載if (this.data.loading) {return;}// 開始加載，可以顯示加載提示，避免用戶重復觸發(fā)加載this.setData({loading: true});// 2. 發(fā)送請求獲取下一頁數(shù)據(jù)this.getList();},

🔑三、總結(jié)

原理其實就是檢測觸底，就把頁碼+1，然后對數(shù)據(jù)進行拼接，以上代碼需根據(jù)實際應用進行修改。歡迎評論交流