uni-app下拉刷新、上拉加载更多实现-蒲公英云

uni-app下拉刷新、上拉加载更多实现

r囧r小猫 2021-12-05 05:55 1292阅读 0赞

下拉刷新

下拉刷新文档
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。
需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh:true。
当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

实例

pages.json
{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "标题名称",
                // App 和 小程序都开启下拉刷新
                "enablePullDownRefresh": true
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#0faeff",
        "backgroundColor": "#fbf9fe"
    }
}
index.vue
// 仅做示例，实际开发中延时根据需求来使用。
export default {
    data: {
        text: 'uni-app'
    },
    onLoad: function (options) {
        setTimeout(function () {
            console.log('start pulldown');
        }, 1000);
        uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    }
}

上拉加载

导入官方的一个上拉加载自定义组件

在 components 目录下（和 page 目录同级）新建一个 uni-load-more 文件夹，
然后创建一个文件 uni-load-more.vue

uni-load-more.vue 完整文件如下：
导入自定义的上拉加载组件，监听上拉加载，修改上拉加载的状态

完整的使用例子如下：