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


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 相关文章推荐
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
对比分析json及XML
2014/11/28 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python3中编码获取网页的实例方法
2020/11/16 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
质量承诺书范文
2014/03/27 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
创业计划书之面包店
2019/09/17 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python