具体内容如下

微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData,下面是一个简单的栗子:

index.wxml代码如下

<viewwx:for="{{duanziInfo}}"wx:for-item="name"wx:for-index="id"><viewclass="duanzi-view"><viewclass="duanzi-content"><textclass="dz-content">{{name.content}}</text></view></view></view><viewclass="button-wrapper"><buttontype="default"size="default"loading="{{loading}}"disabled="{{disabled}}"bindtap="setLoading">{{loadText}}</button></view>

加载更多按钮绑定setLoading

index.js文件代码如下

Page({data:{loadText:'加载更多',duanziInfo:[]},//初始化请求onLoad:function(res){varthat=this//内容wx.request({url:'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',data:{token:token},method:'GET',success:function(res){console.log(res.data.result)//打印初始化数据that.setData({duanziInfo:res.data.result})}})},//加载更多setLoading:function(e){varduanziInfoBefore=this.data.duanziInfovarthat=thiswx.showToast({//期间为了显示效果可以添加一个过度的弹出框提示“加载中”title:'加载中',icon:'loading',duration:200})wx.request({url:'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',data:{token:token},method:'GET',success:function(res){console.log(duanziInfoBefore.concat(res.data.result))//打印拼接之后数据that.setData({loadText:"数据请求中",loading:true,duanziInfo:duanziInfoBefore.concat(res.data.result),loadText:"加载更多",loading:false,})}})}})

初始化和加载更多中的打印数据如下

(以上是点击查看更多,还可以根据距离视图区域的距离来加载更多,具体实现是将视图用<scroll-view>标签,并给其一个固定高度,在给定参数中设置距离像素触发事件。具体文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122)

感谢各位的阅读!关于“微信小程序加载更多和点击查看更多的实现方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!