微信小程序实现上拉加载功能


Posted in Javascript onNovember 20, 2019

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

demo.wxml  文件

<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
 <view class='title'>{{ item.store_name }}</view>
 <image src='{{item.logo}}'></image>
</view>

<view class="load-more-wrap">
 <block wx:if="{{hasMore}}">
  <view class="load-content">
   <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
  </view>
 </block>
 <block wx:else>
  <view class="load-content">
   <text>没有更多内容了</text>
  </view>
 </block>
</view>

demo.js文件

Page({
 data: {
  listdata:[],  //数据
  paginated: '',
  //{total:"12", count: 10, more: 1} total数据总数,count:当前分页数据数据,more:1表示还有,0表示无数据
  p:0, //当前分页;默认第一页
  hasMore:true //提示
 },
 onLoad: function (options) {
  var that = this;
  var p = that.data.p;
  this.loadmore();
 },
 onReachBottom:function(){
  var that = this;
  var paginated = that.data.paginated;
  if (paginated.more != 0) {
   this.loadmore();
  }else{
   that.setData({
    "hasMore": false
   })
  }
 },
 loadmore:function(){
  wx.showToast({
   title: "玩命加载中",
   icon: 'loading',
   duration: 1000
  })
  var that = this;
  var p = ++that.data.p;
  wx.request({
   url: 'xxx',
   data: {
    "json": JSON.stringify({
     "demo": "xxx", "p": p
    })
   },
   method: 'POST',
   header: {
    'content-type': 'application/x-www-form-urlencoded'
   },
   success:function(res){
    if (res.data.data != 0) {
     that.setData({
      "listdata": that.data.listdata.concat(res.data.data), //加载数据
      "paginated": res.data.paginated, //{total:"12", count: 10, more: 1} 此处主要用于上拉加载是否加载数据
      "p":p
     })
    } else {
     that.setData({
      "hasMore":false
     })
    }
   }
  })
 }
})

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

Javascript 相关文章推荐
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
微信小程序实现锚点功能
Nov 20 #Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 #Javascript
微信小程序实现时间进度条功能
Nov 17 #Javascript
小程序实现投票进度条
Nov 20 #Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 #Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 #Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
深入了解PHP类Class的概念
2012/06/14 PHP
php错误级别的设置方法
2013/06/17 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
Javascript缓存API
2016/06/14 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python如何实现内容写在图片上
2018/03/23 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
什么是Python变量作用域
2020/06/03 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
社区消防工作实施方案
2014/03/21 职场文书
五四青年节演讲稿
2014/05/26 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Golang bufio详细讲解
2022/04/21 Golang