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


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 相关文章推荐
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
PHP队列用法实例
2014/11/05 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
Python的迭代器和生成器
2015/07/29 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python分支结构(switch)操作简介
2018/01/17 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python中logging日志库实例详解
2020/02/19 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
护士进修自我鉴定
2014/02/07 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Python机器学习之逻辑回归
2021/05/11 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技