小程式之滑動載入(懶載入)
阿新 • • 發佈:2021-08-05
程式碼實現
介面請求有問題的話請看我上一篇文章:小程式如何請求介面資料
html
<block class="order-list"> <view class="list" wx:for="{{allData}}"> <view> <image src="{{item.goods_logo}}" alt="" /> </view> <view> <text>{{item.goods_title}}</text> <text>¥{{item.selling_price}}/份</text> <text>{{item.goods_desc}}</text> </view> </view> </block>
css(簡單的排版下)
.list{ display: flex; } .list view:last-child{ padding-top: 10rpx; } .list view image{ width: 200rpx; height: 200rpx; border-radius: 10rpx; margin: 20rpx; } .list view text{ display: block; }
js
data: { page:1, length:5, allData:[] }, getListData(){ let that=this let page=that.data.page; (0, _rewx.post)("/applet/goods/getlist", { store_id: 1 ,page:that.data.page}).then(function (t) { console.log(t) that.setData({ order_list:t.goods_list }) let list= that.data.allData.concat(t.goods_list) if(t.goods_list.length < 1){ that.setData({ moreLoadingComplete: true, moreLoading: false }) }else{ page++; that.setData({ 'allData':list, 'page':page, no_data:t.goods_list, moreLoading:true }) //console.log(that.data.allData); } }); }, onShow: function () { var e = this; e.setData({ page: 1, length: 10, allData:[] }), e.getListData(); }, onReachBottom: function () { this.getListData(); },