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


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 相关文章推荐
js算法中的排序、数组去重详细概述
Oct 14 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PDO::rollBack讲解
2019/01/29 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python实现八大排序算法
2016/08/13 Python
python线程池threadpool实现篇
2018/04/27 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python3的socket使用方法详解
2020/02/18 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
详细的大学生创业计划书模板
2014/01/27 职场文书
公司董事长岗位职责
2014/06/08 职场文书
开学第一周总结
2015/07/16 职场文书