微信小程序实现列表下拉刷新上拉加载


Posted in Javascript onJuly 29, 2020

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

DEMO下载

效果图

微信小程序实现列表下拉刷新上拉加载

原理

利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改!

页面配置JSON

  • enablePullDownRefresh:开启下拉刷新;
  • onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px。
{
 "enablePullDownRefresh": true,
 "onReachBottomDistance": 50
}

WXML

<view class="tui-content">
 <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>

JS

此处用setTimeout模拟请求数据;
加载数据限制三次,调用wx.showToast显示没有更多数据。

Page({
 data: {
 dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
 count : 0
 },
 onPullDownRefresh(){
 var self = this;
 setTimeout(() => {
 // 模拟请求数据,并渲染
 var arr = self.data.dataList, max = Math.max(...arr);
 for (var i = max + 1; i <= max + 3; ++i) {
 arr.unshift(i);
 }
 self.setData({ dataList: arr });
 // 数据成功后,停止下拉刷新
 wx.stopPullDownRefresh();
 }, 1000);
 },
 onReachBottom(){
 var arr = this.data.dataList, max = Math.max(...arr);
 if (this.data.count < 3) {
 for (var i = max + 1; i <= max + 5; ++i) {
 arr.push(i);
 }
 this.setData({
 dataList: arr,
 count: ++this.data.count
 });
 } else {
 wx.showToast({
 title: '没有更多数据了!',
 image: '../../src/images/noData.png',
 })
 }
 }
})

总结

必须在每次数据请求完成后,使用wx.stopPullDownRefresh()停止下拉刷新。

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

Javascript 相关文章推荐
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
微信小程序数字滚动插件使用详解
Feb 02 #Javascript
JS中的BOM应用
Feb 02 #Javascript
微信小程序实现文字跑马灯效果
May 26 #Javascript
微信小程序实现滚动消息通知
Feb 02 #Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 #Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 #Javascript
vuex的简单使用教程
Feb 02 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
加速XP搜索功能堪比vista
2007/03/22 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
介绍一下write命令
2012/09/24 面试题
六年级数学教学反思
2014/02/03 职场文书
少儿节目主持串词
2014/04/02 职场文书
一年级学生评语
2014/04/23 职场文书
合作意向书
2014/07/30 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
python基于turtle绘制几何图形
2021/06/15 Python