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


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中利用数组实现的循环队列代码
Jan 24 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 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和MySql来与ODBC数据连接
2006/10/09 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python连接DB2数据库
2016/08/27 Python
Python格式化输出%s和%d
2018/05/07 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
二手房买卖协议书
2014/04/10 职场文书
体育运动口号
2014/06/09 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
上课迟到检讨书
2015/05/06 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
TS 类型收窄教程示例详解
2022/09/23 Javascript