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


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 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
react合成事件与原生事件的相关理解
May 13 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 实现身份验证代码
2010/03/24 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
Python的requests网络编程包使用教程
2016/07/11 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python异常处理知识点总结
2019/02/18 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
德国帽子专家:Hutshopping
2019/11/03 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
物业管理求职自荐信
2013/09/25 职场文书
党校毕业心得体会
2014/09/13 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
六年级学生评语大全
2014/12/26 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers