微信小程序下拉刷新onPullDownRefresh

责编:menVScode 2018-10-17 11:19 阅读(161)

页面事件处理函数-onPullDownRefresh()

    (1) 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

    (2) 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

    (3) 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

官方介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#%E9%A1%B5%E9%9D%A2%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0


1、在app.json的window选项中或页面配置种设置 enablePullDownRefresh

{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50
}

{
    "window": {
      "enablePullDownRefresh":true
    },
}

2、配置 backgroundTextStyle

backgroundTextStyle:下拉 loading 的样式,默认是light,仅支持 dark / light

{
  "backgroundTextStyle": "dark"
}

enablePullDownRefresh、backgroundTextStyle配置可在官方文档查看:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE,页面中的 window部分。

3、wx.stopPullDownRefresh

当处理完数据刷新后,可以用 stopPullDownRefresh 停止当前页面的下拉刷新。

Page({
    onPullDownRefresh: function(){
        wx.showNavigationBarLoading() //在标题栏中显示加载
        wx.request({
            url: '',
            data: {},
            method: 'GET',
            success: function (res) {},
            fail: function (res) {},
            complete: function (res) {
                wx.hideNavigationBarLoading() //完成停止加载
                wx.stopPullDownRefresh();
            }
        })
    }
})


效果

GIF

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码