下拉刷新，上拉加载

1. 下拉刷新

1.1 onPullDownRefresh

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

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

1.2 uni.startPullDownRefresh(OBJECT)

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

OBJECT 参数说明

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
errMsg	String	接口调用结果

1.3 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请使用真机调试（非真机预览）
• 后续支付宝小程序开发工具更新可能会有所修改

2. 上拉加载

2.1 onReachBottom

页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "uni-app",
        // 页面上拉触底事件触发时距页面底部距离，单位只支持px
        "onReachBottomDistance":100
    }
}

<template>
    <view class="find">
        <view class="per" v-for="item in num" :key="item">
            {{ item }}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num:20
            };
        },
        onReachBottom(){
            console.log("页面滚动到底部");
            setTimeout(()=>{
                this.num+=10
            },2000)
        }
    }
</script>

<style lang="scss" scoped>
.find{
    .per{
        height: 40px;
        background: #ccc;
        text-align: center;
        margin: 10px auto;
    }
}
</style>