微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】


Posted in Javascript onMay 29, 2020

本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考,具体如下:

开发需求

进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据。

微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

演示

微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

index.wxml

<!-- 数据列表 -->
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
 <view class='title'>{{item.title}}</view>
 <view class='title'>资源ID:{{item.id}}</view>
 <image src="{{item.coverimg}}" class='cover'></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>

index.js

Page({
 data: {
 listdata:[], //数据
 moredata: '',
 p:0, //当前分页;默认第一页
 hasMore:true //提示
 },

 //加载初始数据
 onLoad: function (options) {
 var that = this;

 //初始页面
 var p = that.data.p;
 this.loadmore();
 },

 //触底事件
 onReachBottom:function(){
 var that = this;
 //检查是否还有数据可以加载
 var moredata = that.data.moredata;
 //如果还有,则继续加载
 if (moredata.more != 0) {
  this.loadmore();
  //如果没有了,则停止加载,显示没有更多内容了
 }else{
  that.setData({
  "hasMore": false
  })
 }
 },

 //发起请求
 loadmore:function(){

 //加载提示
 wx.showLoading({
  title: '加载中',
 })

 var that = this;
 //页面累加
 var p = ++that.data.p;

 //请求服务器
 wx.request({
  url: '你的服务器/server.php?page=' + p,
  data: {
  "json": JSON.stringify({
   "p": p
  })
  },

  method: 'POST',
  header: {
  'content-type': 'application/x-www-form-urlencoded'
  },

  //请求成功,回调函数
  success:function(res){
  
  //隐藏加载提示
  wx.hideLoading();

  //判断市局是否为空
  if (res.data != 0) {
   that.setData({
   //把新加载的数据追加到原有的数组
   "listdata": that.data.listdata.concat(res.data), //加载数据
   "moredata": res.data,
   "p":p
   })
  } else {
   that.setData({
   "hasMore":false
   })
  }
  }
 })
 }
})

说明

1、url修改为你的服务端链接,格式是

http:域名/目录/?page=页码

例如:

http://www.baidu.com/api/data.php?page=1

页码是可变的,所以声明一个变量p,所以就是

`url: 'http://www.baidu.com/api/data.php?page' + p,`

index.wxss

.listitem{
 width: 90%;
 height: 155px;
 background: rgba(0, 0, 0, 0.2);
 margin:10px auto;
 text-align: center;
 position: relative;
 color:#fff;
}

.listitem .cover{
 width:100%;
 height:155px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}

.load-more-wrap .load-content{
 text-align: center;
 margin:30px auto 30px;
 color:#ccc;
 font-size: 15px;
}

服务端返回的数据格式

返回json数组的形式,例如

[
 {"id":"1","title":"标题1","coverimg":"url1"},
 {"id":"2","title":"标题2","coverimg":"url2"},
 {"id":"3","title":"标题3","coverimg":"url3"},
 {"id":"4","title":"标题4","coverimg":"url4"},
 {"id":"5","title":"标题5","coverimg":"url5"}
]

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 #Javascript
JavaScript隐式类型转换代码实例
May 29 #Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 #Javascript
node+vue实现文件上传功能
May 28 #Javascript
vue中实现图片压缩 file文件的方法
May 28 #Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 #Javascript
Vue实现附件上传功能
May 28 #Javascript
You might like
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php遍历CSV类实例
2015/04/14 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP的反射机制实例详解
2017/03/29 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python中time库的实例使用方法
2019/10/31 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
建筑公司文秘岗位职责
2013/11/29 职场文书
百度吧主申请感言
2014/01/12 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技