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


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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
微信小程序选择图片控件
Jan 19 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python实现机器人卡牌
2019/10/06 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
食品流通安全承诺书
2014/05/22 职场文书
幼师自荐信范文
2015/03/06 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
优秀志愿者感言
2015/08/01 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
php引用传递
2021/04/01 PHP
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技