微信小程序 下拉刷新 上拉加载
1.下拉刷新
小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。
1. 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新。
具体页面的.json文件:
1 {
2 "enablePullDownRefresh": true
3 }
app.json文件:
1 "window": {
2 "enablePullDownRefresh": true
3 }
2. 在js文件中添加回调函数
// 下拉刷新回调接口
onPullDownRefresh: function () {
// do somthing
},
3. 添加数据
通常情况下的下拉刷新操作,就是把查询条件重置,让页面显示最新的一页数据。下面是笔者demo中的下拉刷新回调接口的代码,同时也是一般情况下的操作流程。
1 // 下拉刷新回调接口
2 onPullDownRefresh: function () {
3 // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。
4 // 刷新时需把total重置为0,代表重新从第一条请求。
5 total = 0;
6 // this.data.dataArray 是页面中绑定的数据源
7 this.data.dataArray = [];
8 // 网络请求,重新请求一遍数据
9 this.periphery();
10 // 小程序提供的api,通知页面停止下拉刷新效果
11 wx.stopPullDownRefresh;
12 },
2 .上拉加载
同下拉刷新一样,小程序中也提供了用于上拉时回调的接口。官方文档中并没有很详细的介绍,经测试发现,上拉回调的接口并不需要额外的配置(下拉时需要在 .json文件中配置 "enablePullDownRefresh": true),直接在页面滑动到底部时就能拿到回调。
1. 在js文件中添加回调函数
1 // 上拉加载回调接口
2 onReachBottom: function () {
3 // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。
4 // 上拉时需把total在原来的基础上加上count,代表从count条后的数据开始请求。
5 total += count;
6 // 网络请求
7 this.periphery();
8 },
微信小程序 下拉刷新 上拉加载的更多相关文章
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序小结(4) -- 分包加载及小程序间跳转
分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...
- 【微信小程序】scroll-view 的上拉加载和下拉刷新
1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 微信小程序云开发-列表数据分页加载显示
一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...
- 微信小程序:添加全局的正在加载中图标效果
在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 微信小程序下拉刷新和上拉加载
小程序知识点二 1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true& ...
随机推荐
- java调用http接口的几种方式总结
本文参考: https://blog.csdn.net/fightingXia/article/details/71775516 https://www.cnblogs.com/jeffen/p/69 ...
- VS2010的单元测试(一)
在VS2010中,单元测试的功能很强大,使得建立单元测试和编写单元测试代码,以及管理和运行单元测试都变得简单起来,通过私有访问器可以对私有方法也能进行单元测试,并且支持数据驱动的单元测试. 一.创建单 ...
- Leetcode(13)-罗马数字转整数
罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并列 ...
- C++ part1
C++内存分配 references: C++ 自由存储区是否等价于堆? c++ new 与malloc有什么区别 C++, Free-Store vs Heap 1. 栈:由编译器自动分配释放,存放 ...
- JDK下载安装与卸载详解
JDK下载安装 1. 下载: 推荐版本:JDK 8 (7.8目前广泛应用) 官网地址:https://www.oracle.com/cn/java/technologies/javase/javase ...
- linux通识
linux是服务器应用领域的开源且免费的多用户多任务操作系统的内核. 以下是对上述论断的解释: 操作系统 简言之,操作系统乃是所有计算设备的大管家,小到智能手表,大到航天航空设备,所有需要操控硬件的地 ...
- Doris开发手记1:解决蛋疼的MySQL 8.0连接问题
笔者作为Apache Doris的开发者,平时感觉相关Doris的文章写的很少.主要是很多时候不知道应该去记录一些怎么样的问题,感觉写的不好就会很慌张.新的一年,希望记录自己在Doris开发过程之中所 ...
- SSH Keys vs GPG Keys
SSH Keys vs GPG Keys SSH Keys SSH keys allow you to establish a secure connection between your compu ...
- Worktile vs Teambition
Worktile vs Teambition 项目管理.团队协作 企业服务.协同办公 worktile 易成科技 北京易成星光科技有限公司 https://www.tianyancha.com/com ...
- React Hooks vs React Class vs React Function All In One
React Hooks vs React Class vs React Function All In One React Component Types React Hooks Component ...