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


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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
vue 实现动态路由的方法
Jul 06 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
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php 分页类 扩展代码
2009/06/11 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python学习必备知识汇总
2017/09/08 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python解析微信dat文件的方法
2020/11/30 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
怎样写留学自荐信
2013/11/11 职场文书
幼儿教师工作感言
2014/02/14 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python