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


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 跳转代码集合
Dec 03 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
原生js+css实现tab切换功能
Sep 17 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python调用接口的4种方式代码实例
2019/11/19 Python
python通过链接抓取网站详解
2019/11/20 Python
css sprite简单实例
2016/05/23 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
应届生自荐信范文
2014/02/21 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014年度工作总结报告
2014/12/15 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技