uni-app 实现下拉刷新功能

田昌蓉

我们在运用uni-app开发小程序或h5时，常常需要页面实现下拉刷新功能。

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

步骤：

1、需要在pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启enablePullDownRefresh。
2、当处理完数据刷新后，uni.stopPullDownRefresh可以停止当前页面的下拉刷新。

示例

pages.json

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#0faeff",
        "backgroundColor": "#fbf9fe"
     }
}

index.vue

// 仅做示例，实际开发中延时根据需求来使用。
export default {
    data: {
        text: 'uni-app'
    },
    onShow: function (options) {
      this.loadData();
    },
    onPullDownRefresh() {
      this.loadData()
    }
   methods:{
       loadData() {
                this.$http('/data', {}, 'get').then((res) => {
                    //数据请求完成之后停止下拉刷新
                    uni.stopPullDownRefresh();
                    if (res.status) {
                        this.activityList = res.data
                    }
                })
            }
      }
}

演示效果

来源：https://www.cnblogs.com/xkboi/p/16853397.html