uni-app下拉刷新

onPullDownRefresh

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

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。

示例

pages.json

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true,  //设置为true表示当前页面开启下拉刷新
                "backgroundTextStyle": "dark"  //下拉 loading 的样式，仅支持 dark/light
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#0faeff",
        "backgroundColor": "#fbf9fe"
    }
}

• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

uni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

OBJECT 参数说明

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
errMsg	String	接口调用结果

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

index.vue

export default {
    data: {
        text: 'uni-app'
    },
    onLoad: function (options) {
        setTimeout(function () {
            console.log('start pulldown');
        }, 1000);
        //uni.startPullDownRefresh();
        uni.startPullDownRefresh({
            success：function(res){
                console.log(res);  //success 返回参数说明
            }
        });  //这里表示当进入页面的时候就开始执行下拉刷新动画
    },
    onPullDownRefresh() {
        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();  //停止下拉刷新动画
        }, 1000);
    }
}

更多先关资料可以到uni-app官网查看文档：http://uniapp.dcloud.io/api/ui/pulldown