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

下拉刷新

下拉刷新文档
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 完整文件如下:






  • 导入自定义的上拉加载组件,监听上拉加载,修改上拉加载的状态
完整的使用例子如下:







你可能感兴趣的:(Android,小程序之旅)