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
                    }
                })
            }
      }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容