小程序模板网

微信小程序加载更多,点击查看更多

2018-03-31 摘桃子
感谢原作者XiaoBaiduQs,原文地址

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

下面是一个简单的栗子:

index.wxml代码如下

 

[html] view plain copy
 
  1. <view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id">   
  2.     <view class="duanzi-view">  
  3.       <view class="duanzi-content">  
  4.         <text class="dz-content">{{name.content}}</text>  
  5.       </view>  
  6.     </view>  
  7. </view>  
  8. <view class="button-wrapper">  
  9.   <button type="default" size="default" loading="{{loading}}" disabled="{{disabled}}" bindtap="setLoading">  
  10.     {{loadText}}  
  11.   </button>  
  12. </view>  
加载更多按钮绑定setLoading

 

index.js文件代码如下

 

[javascript] view plain copy
 
  1. Page({  
  2.         data: {  
  3.             loadText:'加载更多',  
  4.             duanziInfo:[]  
  5.         },  
  6.     //初始化请求  
  7.     onLoad: function (res) {  
  8.         var that = this  
  9.         //内容  
  10.         wx.request({  
  11.             url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',  
  12.             data: {token:token},  
  13.             method: 'GET',   
  14.             success: function(res){  
  15.             console.log(res.data.result) //打印初始化数据  
  16.                 that.setData({  
  17.                 duanziInfo:res.data.result  
  18.                 })  
  19.             }  
  20.         })  
  21.       },  
  22.       //加载更多  
  23.     setLoading: function(e) {  
  24.         var duanziInfoBefore = this.data.duanziInfo  
  25.         var that = this  
  26.         wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  
  27.             title: '加载中',  
  28.             icon: 'loading',  
  29.             duration: 200  
  30.           })  
  31.         wx.request({  
  32.             url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',  
  33.             data: {token:token},  
  34.             method: 'GET',   
  35.             success: function(res){  
  36.                 console.log(duanziInfoBefore.concat(res.data.result)) //打印拼接之后数据  
  37.                 that.setData({  
  38.                 loadText:"数据请求中",  
  39.                 loading:true,  
  40.                 duanziInfo:duanziInfoBefore.concat(res.data.result),  
  41.                 loadText:"加载更多",  
  42.                 loading:false,  
  43.               })  
  44.             }  
  45.         })  
  46.     }  
  47. })  

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22999.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询