开启下拉刷新

在uni-app中有两种方式开启下拉刷新
需要在pages.json里，找到的当前页面的pages节点，并在style选项中开启enablePullDownRefresh
通过调用**uni.startPullDownRefresh**方法来开启下拉刷新

通过配置文件开启

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

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

通过API开启

uni.startPullDownRefresh(OBJECT)

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

success 返回参数说明

监听下拉刷新

onPullDownRefresh

关闭下拉刷新

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() {
        return {
            text: 'uni-app'
        }
    },
    onLoad: function (options) {
        setTimeout(function () {
            console.log('start pulldown');
        }, 1000);
        uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    }
}

注意

• 支付宝小程序startPullDownRefresh在开发者工具里会提示暂未开放，请勿使用
• 支付宝小程序startPullDownRefresh请使用真机调试（非真机预览）
• 后续支付宝小程序开发工具更新可能会有所修改

案例

<template>
    <view>
        <view class="box">
            这是列表页
        </view>
        <view class="box" v-for="item in list">
            {{item}}
        </view>
        <button type="default" @click="pullDown">下拉刷新</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                list:['前端','java','vue','php','python']
            }
        },
        methods: {
            pullDown(){
                uni.startPullDownRefresh()
            }
        },
        onPullDownRefresh() {
            console.log('触发页面刷新')
            setTimeout(()=>{
                this.list = ['java','ui','web','php']
                uni.stopPullDownRefresh()
            },2000)
        }
    }
</script>
<style>
</style>

FAQ

Q：如何暂时禁用掉下拉刷新，待需要的时候再重新开启？
A：App 平台下可以处理此类场景，详细参考：uni-app 中实现动态禁用/开启下拉刷新

Q：自定义title如何让下拉刷新在title之下
A：App和H5端使用circle方式的下拉刷新，设offset在title高度之下。hello uni-app的模板-导航栏中有示例。小程序端无法实现，除非放弃原生下拉刷新，自己模拟下拉刷新，插件市场有类似插件，但性能不如原生下拉刷新。

Q：如何自定义下拉刷新样式
A：小程序端的原生下拉刷新样式是固定的；App端原生的下拉刷新有2种样式可选择，下拉漏出雪花和下拉circle圈。如果使用nvue，可以使用refresh组件自定义下拉刷新，都是原生渲染。如果想使用scroll-view在前端实现自定义下拉刷新，需要注意列表不可太长和太复杂，否则会有性能问题。插件市场搜索下拉刷新有示例。