实现加载更多
微信小程序从正式发布到现在，已经大概有两个月的时间了，但是一直处于一种不温不火的状态，最后小程序究竟会怎么样呢？我们拭目以待，但是作为一个程序员，我们还是有必要去了解一下小程序，至少以后别人问起的时候，不至于一问三不知。
断断续续研究小程序有一段时间了，看到有很多人问关于上拉加载更多的问题，我就研究了一下，也是找了很多的资料，最后终于大功告成了，代码有注释，很详细，包括从后台请求图片，还希望各路大神多多指点，在此谢过!!! Mr-hyc点评：我个人测试中，可能请求的域名暂时无法使用，但是不影响学习；
代码示例：
|
01
02
03
04
05
06
07
08
09
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
//index.js
Page({
data:{
scrollH:0,
//定义一个数组(很重要，否则下面的push()函数不好使)
list:[],
num:0,
uploadImg:’../../images/icon.gif’,
uploadImgTxt:’拼命加载中,请稍后…’,
upload:false
},
onLoad:function(){
var that=this;
//获取设备的高度赋值给scroll-view高
wx.getSystemInfo({
success:function(res){
console.log(res.windowHeight)
that.setData({
scrollH:res.windowHeight-5
})
}
})
},
//刚开始加载的时候进行数据请求
onShow:function(){
var that=this;
GetImg(that);
},
//当滑动到底部的时候再进行一次数据请求
bindDownload:function(){
var that=this;
GetImg(that);
}
})
//通过num值得变化，从后台获取不同的数据
var num=0;
//获取图片函数
var GetImg=function(that){
wx.request({
url:’http://mr_cc.com/ceshi/item/item.php?page=’+num,
method:’GET’,
data:{},
header:{
‘Accept’:’application/json’
},
success:function(res){
var list=that.data.list;
for(var i=0;i<res.data.list.length;i++){
list.push(res.data.list[i])
}
//console.log(res.data.list.length)
//判断如果后台返回的数组长度为1，则停止num值++;停止传递信息
if(res.data.list.length!=1){
num++;
that.setData({
Images:list,
})
}else{
that.setData({
uploadImgTxt:’已经全部加载！’,
uploadImg:’../../images/icon_02.png’,
})
setTimeout(function(){
that.setData({
upload:true
})
},1000)
}
}
})
}
|
|
1
2
3
4
5
6
7
8
9
|
<scroll-view scroll-y=”true” style=”height:{{scrollH}}px” bindscrolltolower=”bindDownload”>
<view class=”item”>
<view class=”item-Img” wx:for=”{{Images}}”>
<image src=”{{item.picurl}}”></image>
</view>
</view>
<view class=”upload” hidden=”{{upload}}”>
<image src=”{{uploadImg}}”></image>{{uploadImgTxt}}</view>
</scroll-view>
|
