当前位置:网站首页>Implementation of wechat applet bottom loading and pull-down refresh
Implementation of wechat applet bottom loading and pull-down refresh
2022-07-05 10:24:00 【InfoQ】
Bottom touch loading
- Encapsulates a loader function
- This is triggered when the listening page is loaded loader function
- Trigger this function again when the bottom is detected
onLoad: function (options) {
this.loadBooks(this.data.books.length)
},
onReachBottom: function () {
this.loadBooks(this.data.books.length)
},
loadBooks: function () {
},
onload
onReachBottom
loader Functional thinking
skip(n)
loader Function implementation
- call wx Developed by the cloud api,
skip(n)
From the... Of the set n Item start getlimit(n)
At most n Elements .
- adopt get Obtain corresponding data , Here for n After 6 Data .
- adopt
cancat()
To realize the merging of arrays, we need to pay attention to the followinglimit(n)
Direct use has 20 The length limit of , If there is a need , Need to get 20 More than one data set , Then we can solve it in the cloud function .
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)
})
})
},
Touch the bottom to load the animation
<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);
}
}
Advantages of bottom loading
The drop-down refresh
- At the same level of the corresponding page json Configure it in the file
enablePullDownRefresh
Make ittrue
, Here is the drop-down refresh setting of the corresponding page
{
"usingComponents": {},
"enablePullDownRefresh": true,
}
- Use
onPullDownRefresh
Monitor user pull-down action
onPullDownRefresh: function () {},
- call wx Loading api
onPullDownRefresh: function () {
console.log(1)
// Show load... In the title bar
wx.showNavigationBarLoading()
wx.showLoading({
title: ' Refreshing ...',
})
wx.cloud.database().collection('books').skip(0).limit(6).get().then(res => {
this.setData({
books: res.data
})
wx.hideLoading();
// Hide navigation bar loading animation
wx.hideNavigationBarLoading();
// Stop the drop-down refresh
wx.stopPullDownRefresh();
})
},
wx.showNavigationBarLoading()
Display and load animation in the navigation bar
wx.hideNavigationBarLoading()
Hide navigation bar loading animation
wx.stopPullDownRefresh()
Stop the drop-down refresh
Last
边栏推荐
- Z-blog template installation and use tutorial
- StaticLayout的使用详解
- MySQL digital type learning notes
- 如何写出高质量的代码?
- Zblogphp breadcrumb navigation code
- In wechat applet, after jumping from one page to another, I found that the page scrolled synchronously after returning
- Energy momentum: how to achieve carbon neutralization in the power industry?
- NCP1342芯片替代料PN8213 65W氮化镓充电器方案
- 《通信软件开发与应用》课程结业报告
- 苹果 5G 芯片研发失败?想要摆脱高通为时过早
猜你喜欢
Apple 5g chip research and development failure? It's too early to get rid of Qualcomm
A large number of virtual anchors in station B were collectively forced to refund: revenue evaporated, but they still owe station B; Jobs was posthumously awarded the U.S. presidential medal of freedo
到底谁才是“良心”国产品牌?
《微信小程序-基础篇》小程序中的事件与冒泡
Constraintlayout officially provides rounded imagefilterview
ConstraintLayout官方提供圆角ImageFilterView
RMS to EAP is simply implemented through mqtt
Unity particle special effects series - the poison spray preform is ready, and the unitypackage package can be used directly - next
> Could not create task ‘:app:MyTest. main()‘. > SourceSet with name ‘main‘ not found. Problem repair
StaticLayout的使用详解
随机推荐
报错:Module not found: Error: Can‘t resolve ‘XXX‘ in ‘XXXX‘
How to write high-quality code?
Singleton mode encapsulates activity management class
《剑来》语句摘录(七)
【 conseils 】 obtenir les valeurs des axes X et y de la fonction cdfplot dans MATLAB
Lepton 无损压缩原理及性能分析
Unity particle special effects series - the poison spray preform is ready, and the unitypackage package can be used directly - next
> Could not create task ‘:app:MyTest. main()‘. > SourceSet with name ‘main‘ not found. Problem repair
QT VT100 parser
Detailed explanation of the use of staticlayout
Glide Mastery
In wechat applet, after jumping from one page to another, I found that the page scrolled synchronously after returning
Matrix processing practice
"Everyday Mathematics" serial 58: February 27
Cerebral cortex: directed brain connection recognition widespread functional network abnormalities in Parkinson's disease
《微信小程序-基础篇》小程序中的事件与冒泡
最全是一次I2C总结
Wechat applet - simple diet recommendation (4)
到底谁才是“良心”国产品牌?
ConstraintLayout的流式布局Flow