欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
实现加载更多实现加载更多
立即下载

实现加载更多

模板分类 : 小程序模板 模板编号 : Y1004 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-03-19 17:44 模板等级 : ☆☆☆☆☆

模板截图:

作者的话: 微信小程序从正式发布到现在,已经大概有两个月的时间了,但是一直处于一种不温不火的状态,最后小程序究竟会怎么样呢?我们拭目以待,但是作为一个程序员,我们还是有必要去了解一下小程序,至少以后别人问起的时候,不至于一问三不知。  断断续续研究小程序有一段时间了,看到有很多人问关于上拉加载更多的问题,我就研究了一下,也是找了很多的资料,最后终于大功告成了,代码有注释,很详细,包括从后台请求图片,还希望各路大神多多指点,在此谢过!!! Mr-hyc 点评:我个人测试中,可能请求的域名暂时无法使用,但是不影响学习; 实现加载更多(图1)  代码示例:
[AppleScript] 纯文本查看 复制代码
?
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)
                
            }
            
        }
    })
}
[AppleScript] 纯文本查看 复制代码
?
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>

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。