本文主要介绍微信小程序PullDownRefresh的实现方法,通过示例代码非常详细的介绍,对你的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
前言
下拉和上拉加载是非常常见的业务需求。在微信小程序中,提供了onPullDownRefresh的下拉刷新方法。虽然微信的官方文档漏洞很多,但是下拉刷新介绍还是很全面的。
微信小程序-下拉刷新。使用jpeg文件交换格式存储的编码图像文件扩展名
最近开发了一个微信小程序,有下拉刷新数据的功能。于是,又开始折腾了。
一、onPullDownRefresh回调
简单看了一下文档,发现小程序js中有一个onPullDownRefresh回调,果断重写。
//http://itlao5.com
onpulldownresh:function(){
console.log(onPullDownRefresh )
this.queryData(id)
},
二、enablePullDownRefresh支持
但是,我发现无论我怎么拉下来,都无法触发js回调。
我不得不继续阅读该文档,并发现有必要配置json以支持下拉刷新,即:
EnablePullDownRefresh: true //请注意,它是true,而不是 true 字符串,
//有些开发人员发现它被设置或无效,
//这可能是因为设置了“enablePullDownRefresh”:“true”
这可以在app.json中全局配置,让所有页面都有下拉刷新功能;也可以在json中配置对应需要下拉刷新功能的页面。
太好了,下拉刷新功能完成。
三、backgroundTextStyle配置
但是,还是有一点不完美。当别人的小程序被拉下来刷新时,可以看到顶部有三个闪烁小点的动画;而我的小程序上面是空白的。
原来还有一个配置,‘background text style’:’,支持暗/亮;因为我的背景是白色的,这个时候,不进行这个配置。因为颜色的原因,三个闪烁小点的动画看不出来。因此,白色背景需要配置如下:
backgroundTextStyle: dark
四、stopPullDownRefresh停止
此外,微信小程序还提供了停止下拉刷新效果的api。如果发现自己处于刷新状态,无法停止,可以使用这个api。
//小程序提供的api通知页面停止下拉刷新效果。
//http://itlao5.com
wx.stopPullDownRefresh
总结
这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。