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


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 相关文章推荐
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
Vue接口封装的完整步骤记录
May 14 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
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
js中new一个对象的过程
2017/02/20 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
js实现日历
2020/11/07 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
shell程序中如何注释
2012/02/17 面试题
医院合作协议书
2014/08/19 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python