当前位置:网站首页>微信小程序触底加载与下拉刷新的实现
微信小程序触底加载与下拉刷新的实现
2022-07-05 10:01:00 【InfoQ】
触底加载
- 封装一个loader函数
- 在监听页面加载的时候触发这个loader函数
- 在监听到触底的时候再次触发这个函数
onLoad: function (options) {
this.loadBooks(this.data.books.length)
},
onReachBottom: function () {
this.loadBooks(this.data.books.length)
},
loadBooks: function () {
},
onload
onReachBottom
loader函数思考
skip(n)
loader函数实现
- 调用wx云开发的api,
skip(n)
从集合的第n项开始获取limit(n)
获取至多n个元素。
- 通过get获取相应数据,这里为n项后6个数据。
- 通过
cancat()
实现数组的合并需要注意的是这里的limit(n)
直接使用是有20的长度限制,如果有刚需,需要获取20个以上的数据集合,那么我们可以在云函数中去解决。
loadBooks: function (n) {
wx.cloud.database().collection('books').skip(n).limit(6).get().then(res => {
console.log(res.data)
this.setData({
books: this.data.books.concat(res.data)
})
})
},
触底加载动画
<view class="loader" wx:if="{{isLoader}}">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</view>
.dot {
width: 24rpx;
height: 24rpx;
background: #3ac;
border-radius: 100%;
display: inline-block;
animation: slide 1s infinite;
}
.dot:nth-child(n) {
animation-delay: 0.1s;
background: #6cd793;
}
@keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: .3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
触底加载的优点
下拉刷新
- 在相应页面的同级json文件中配置一下
enablePullDownRefresh
使其为true
,这里是开启对应页面的下拉刷新设置
{
"usingComponents": {},
"enablePullDownRefresh": true,
}
- 使用
onPullDownRefresh
监听用户下拉动作
onPullDownRefresh: function () {},
- 调用wx的加载api
onPullDownRefresh: function () {
console.log(1)
//在标题栏中显示加载
wx.showNavigationBarLoading()
wx.showLoading({
title: '刷新中...',
})
wx.cloud.database().collection('books').skip(0).limit(6).get().then(res => {
this.setData({
books: res.data
})
wx.hideLoading();
//隐藏导航条加载动画
wx.hideNavigationBarLoading();
//停止下拉刷新
wx.stopPullDownRefresh();
})
},
wx.showNavigationBarLoading()
在导航条进行显示加载动画
wx.hideNavigationBarLoading()
隐藏导航条加载动画
wx.stopPullDownRefresh()
停止下拉刷新
最后
边栏推荐
- 把欧拉的创新带向世界 SUSE 要做那个引路人
- Redis如何实现多可用区?
- 如何判断线程池已经执行完所有任务了?
- How to plan the career of a programmer?
- Unity粒子特效系列-毒液喷射预制体做好了,unitypackage包直接用 -下
- NCP1342芯片替代料PN8213 65W氮化镓充电器方案
- 小程序中自定义行内左滑按钮,类似于qq和wx消息界面那种
- MySQL character type learning notes
- Livedata interview question bank and answers -- 7 consecutive questions in livedata interview~
- 《微信小程序-基础篇》小程序中的事件与冒泡
猜你喜欢
Solution of ellipsis when pytorch outputs tensor (output tensor completely)
[tips] get the x-axis and y-axis values of cdfplot function in MATLAB
Learning II of workmanager
Unity粒子特效系列-毒液喷射预制体做好了,unitypackage包直接用 -下
Cut off 20% of Imagenet data volume, and the performance of the model will not decline! Meta Stanford et al. Proposed a new method, using knowledge distillation to slim down the data set
How to plan the career of a programmer?
程序员如何活成自己喜欢的模样?
自动化规范检查软件如何发展而来?
Atcoder beginer contest 254 "e BFS" f st table maintenance differential array GCD "
Window下线程与线程同步总结
随机推荐
Mysql80 service does not start
How did automated specification inspection software develop?
Jupiter notebook shortcut key
Interview: is bitmap pixel memory allocated in heap memory or native
To bring Euler's innovation to the world, SUSE should be the guide
The horizontally scrolling recycleview displays five and a half on one screen, lower than the average distribution of five
Cerebral cortex: directed brain connection recognition widespread functional network abnormalities in Parkinson's disease
官网给的这个依赖是不是应该为flink-sql-connector-mysql-cdc啊,加了依赖调
Design and Simulation of fuzzy PID control system for liquid level of double tank (matlab/simulink)
Tianlong Babu TLBB series - single skill group injury
flink cdc不能监听mysql日志,大家遇到过这个问题吧?
Advanced opencv:bgr pixel intensity map
[论文阅读] KGAT: Knowledge Graph Attention Network for Recommendation
Cent7 Oracle database installation error
ConstraintLayout官方提供圆角ImageFilterView
Uni app running to wechat development tool cannot Preview
《微信小程序-基础篇》小程序中的事件与冒泡
Timed disappearance pop-up
WorkManager学习一
《剑来》语句摘录(七)