在分页加载商品列表等数据的时候，希望当最后一项达到页面底部的时候触发新的一页数据的加载动作。 贝店是一个社区营销模式的新型的电商平台，允许个人开设贝店，例如作者的贝店邀请码为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> ```