微信小程序下拉刷新PullDownRefresh的使用方法

微信小程序下拉刷新PullDownRefresh的使用方法

本文主要介绍微信小程序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

总结

这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。

微信小程序下拉刷新PullDownRefresh的使用方法