本文实例为大家分享了微信小程序下拉加载更多商品的具体代码，供大家参考，具体内容如下
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
