uni-app 下拉刷新 配置 手动调用 停止下拉刷新

onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数(和onLaunch,onLoad,onShow等生命周期函数同级),监听当前页面用户下拉刷新事件。

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

{
    "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)

开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。(详细参数说明请点击uni.startPullDownRefresh(OBJECT)标题到uniapp官网查看)

 

uni.startPullDownRefresh(OBJECT)

在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

原文地址:https://www.cnblogs.com/a1847786534/p/14628346.html