本文實例為大家分享了微信小程序下拉加載更多商品的具體代碼，供大家參考，具體內容如下
1. source code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<view class='goods'> <view class='good' wx:for="{{ goodslist }}" wx:key='index'> <view class='pic'> <image src='{{ item.imgUrl }}'></image> </view> <view class='title'> {{ item.des }} </view> <view class='desc'> <text class='price'>￥{{ item.price }}</text> <text class='paynum'> {{ item.alreadyPaid }} </text> </view> </view></view><button loading wx:if="{{loadmore}}"> loading... </button><button wx:else> 我是有底線的 </button> |
wxss：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/* pages/loadmore/loadmore.wxss */.goods{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 20rpx; background-color: #ddd;}.good{ width: 370rpx; height: 528rpx; /* background-color: red; */ margin-bottom: 20rpx;}.pic{ width: 370rpx; height: 370rpx;}.pic image{ width: 100%; height: 100%;}.title{ font-size: 26rpx; padding: 20rpx; height: 52rpx; overflow: hidden;}.desc{ font-size: 23rpx; padding: 20rpx;}.paynum{ margin-left: 165rpx;} |
js：
1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
// pages/loadmore/loadmore.jsPage({ /** * 頁面的初始數據 */ data: { data: [], // 所有數據 goodslist:[], // 展示數據 loadmore: true }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { const that = this; wx.request({ url: 'http://www.tanzhouweb.com/vueProject/vue.php?title=likeYou', success(res){ const data = res.data; const goodslist = []; // 初始顯示6條數據 data.forEach((item, index) => { if(index<6){ goodslist.push(item) } }); // console.log(data) that.setData({ goodslist, data }) } }) }, // 下拉觸底執行（下拉觸底添加后6條數據，直到所有數據加載完成） onReachBottom(e){ const {data, goodslist} = this.data; const start = goodslist.length; const end = Math.min( start + 6, data.length - 1); if(goodslist.length == data.length){ this.setData({ loadmore:false }) return ; } for(let i = start; i<=end; i++){ goodslist.push(data[i]) } this.setData({ goodslist }) }}) |
|
1
2
3
4
5
6
|
{ "usingComponents": {}, "navigationBarBackgroundColor": "#3366CC", "navigationBarTitleText": "商品加載", "navigationBarTextStyle": "white"} |
2. 效果
初始顯示6條數據，下拉觸底加載后6條數據
生命周期函數： onLoad onReachBottom
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/gklcsdn/article/details/111752344
