微信小程序之下拉刷新

前言

　　为了优化用户的体验，小程序一般都会有下拉刷新的功能。这个功能是微信自带的，不需要重复造轮子。

 

下拉刷新

定义下拉方法

　　在 app.json 中进行全局配置，使所有页面都带有下拉刷新功能。

　　或在需要下拉刷新功能的 page 对应的 json 中配置。

window: {
    enablePullDownRefresh: true
}

 

在指定页面定义下拉刷新的函数

　　下拉刷新其实等于是在下拉操作时执行一个函数，函数的内容可以自定义。微信提供了下拉时执行的函数钩子 onPullDownRefresh，在 js 中写入 onPullDownRefresh 就可直接在下拉时被执行。

onPullDownRefresh: function () {
    //调用刷新时将执行的方法
    this.onRefresh();
}

 

　　如果背景色是白色，在下拉刷新时，顶部三个点闪烁的动画就不会显示，可以修改背景色或者修改下拉刷新的配置

"backgroundTextStyle": "dark"

 

停止下拉刷新

　　下拉刷新功能有默认的时长，有时页面已经刷新加载完毕但是仍然处于下拉状态，要等几秒才可以。微信提供了停止下拉刷新的功能，在刷新要执行的函数尾部调用即可

wx.stopPullDownRefresh()

 

自动触发刷新

　　有时页面会有自动刷新需求，如果在自动刷新时也想实现下拉效果，可以调用微信的 startPullDownRefresh 方法

wx.startPullDownRefresh(Object object)