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

总结

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。