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


Posted in Javascript onNovember 29, 2016

本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下

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

index.wxml代码如下

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

加载更多按钮绑定setLoading

index.js文件代码如下

Page({ 
 data: { 
  loadText:'加载更多', 
  duanziInfo:[] 
 }, 
 //初始化请求 
 onLoad: function (res) { 
 var that = 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) { 
 var duanziInfoBefore = this.data.duanziInfo 
 var that = this 
 wx.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)

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
javascript中递归的两种写法
Jan 17 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
js保留两位小数方法总结
Jan 31 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
AngularJs表单验证实例代码解析
Nov 29 #Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 #Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 #Javascript
JavaScript获取服务器端时间的方法
Nov 29 #Javascript
微信小程序链接传参并跳转新页面
Nov 29 #Javascript
JavaScript中Array对象用法实例总结
Nov 29 #Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 #Javascript
You might like
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
用Python创建声明性迷你语言的教程
2015/04/13 Python
python字符类型的一些方法小结
2016/05/16 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
行政部主管岗位职责
2013/12/28 职场文书
七年级英语教学反思
2014/01/15 职场文书
求职简历自我评价范例
2014/03/12 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技