在分頁加載商品列表等數據的時候，希望當最后一項達到頁面底部的時候觸發新的一頁數據的加載動作。 貝店是一個社區營銷模式的新型的電商平臺，允許個人開設貝店，例如作者的貝店邀請碼為690638，任何人下載貝店APP，輸入邀請碼就可以使用貝店購物，同時也可以申請自行開店，每一個貝店有一個唯一的編號，比如作者的貝店編號（shop_id）為682731用于識別分享的商品的來源，點擊以下鏈接可以直達我的貝店 ``` https://m.beidian.com/shop/shopkeeper.html?shop_id=682731 ``` 以下的示例從貝店加載推薦產品列表。貝店提供推薦列表的API格式如下： ``` https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=1&shop_id=682731 ``` 其中有兩個參數：加載的數據分頁page和貝店的編號shop_id，返回JSON格式的數據，包含幾個域，如圖所示 這里我們只用到shop_products字段，該字段包含貝店店主推薦的商品列表，商品的價格以分為單位，shop_products的格式如下 首先定義必要的字段。 ``` export default { data: { page: 0, has_more: true, }, … } ``` ``` async onLoad() { this.page = 0; this.pagedData = []; this.loadMoreData(); } ``` 首先我們假設有更多的數據并嘗試加載第一頁數據，根據返回的字段has_more判斷是否還有更多的數據，如果有就更新頁碼再次加載數據，并將返回的數據合并到現有列表。 loadMoreData函數實現數據的加載。 ``` loadMoreData() { //加載數據 if (this.has_more) { this.page++; let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${this.page}&shop_id=682731`; uni.request({ url: url, success: (res) => { console.log(res) const data = res.data; this.has_more = res.data.has_more; this.pagedData = this.pagedData.concat(data.shop_products); } }) }else{ uni.showToast({ title:"沒有更多數據了" }) } } ``` 當頁面滾動到底部的時候，出發onReachBottom事件，在這個事件中處理加載更多數據的功能。 ``` onReachBottom() { //下拉加載更多的數據 this.loadMoreData(); }, ``` 全部的代碼清單： ``` <template> <view class="page"> <block v-for="(item, index) of pagedData" :key="index"> <view style="flex-direction: column;"> <view style="height: 750rpx;"> <image v-bind:src="item.img" style="width: 100%; height: 100%;"></image> </view> <view class="title"> {{item.title}} </view> <view style="padding: 20rpx;"> <view> <view> {{item.price}} </view> <view style="padding-left: 20rpx;"> {{item.seller_count}} </view> </view> <view style="flex: 1; justify-content: flex-end;"> <view> <button type="warn" size="mini">購買</button> </view> </view> </view> </view> <view class="divider"></view> </block> </view> </template> <script> export default { data() { return { pagedData: [{ img: 'http://via.placeholder.com/750x750', title: '啟蒙積木小汽車小飛機組合套裝兒童益智拼裝積木玩具10小盒展示禮盒裝', price: '￥100', seller_count: '2.13萬人在買' }, { img: 'http://via.placeholder.com/750x750', title: '啟蒙積木小汽車小飛機組合套裝兒童益智拼裝積木玩具10小盒展示禮盒裝', price: '￥100', seller_count: '2.13萬人在買' }, ], page: 0, has_more: true } }, methods: { loadMoreData() { //加載數據 if (this.has_more) { this.page++; let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${this.page}&shop_id=682731`; uni.request({ url: url, success: (res) => { console.log(res) const data = res.data; this.has_more = res.data.has_more; this.pagedData = this.pagedData.concat(data.shop_products); } }) }else{ uni.showToast({ title:"沒有更多數據了" }) } } }, onReachBottom() { //下拉加載更多的數據 this.loadMoreData(); }, async onLoad() { this.page = 0; this.pagedData = []; this.loadMoreData(); } } </script> <style scoped> view { /* margin: 10rpx; border: #8F8F94 solid 1rpx; */ display: flex; flex-direction: row; /* font-size: 28rpx; */ } .page { flex-direction: column; /* min-height: 100vh; */ } .divider { background-color: #8F8F94; height: 10rpx; } .title { padding: 20rpx; font-size: 30rpx; font-weight: bold; } </style> ```