uni-app 下拉刷新

onPullDownRefresh

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

需要在pages.json里，找到的当前页面的pages节点，并在style选项中开启enablePullDownRefresh

当处理完数据刷新后，uni.stopPullDownRefresh可以停止当前页面的下拉刷新。

uni.startPullDownRefresh(OBJECT)

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

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

 

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

 

例如：

在index.vue页面中实现下拉刷新。

①在pages.json中对应的界面中添加配置。

{
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "平台",
                "enablePullDownRefresh":true
            }
        },

②建立下拉刷新监听方法

onPullDownRefresh:function(){//下拉刷新监听方法
            this.getNews();
        }

③实现数据请求方法

getNews:function(){
                //显示加载中动画
                uni.showNavigationBarLoading();
                //请求数据
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
                    success:function(res){
                        console.log(res);
                        _self.newsList=res.data.split('--hcSplitor--');
                        //成功获取数据后结束下拉刷新
                        uni.stopPullDownRefresh();
                        //成功获取数据后隐藏加载动画
                        uni.hideNavigationBarLoading();
                    }
                })
            }

全部代码：

<template>
    <view >
        <!-- 轮播图 -->
        <swiper indicator-dots="true" autoplay="true" >
            <swiper-item>
                <image src="/static/logo.png"></image>
            </swiper-item>
            <swiper-item>2</swiper-item>
            <swiper-item>3</swiper-item>
        </swiper>
        <!-- 显示数据 -->
        <view v-for="(item,index) in newsList" class="newlist">
        {{item}}
        </view>
    </view>
</template>

<script>
    var _self;
    export default {
        data() {
            return{
                newsList:[]
            }
        },
        onLoad:function(){
            this.getNews();
            _self=this;
        },
        onPullDownRefresh:function(){//下拉刷新监听方法
            this.getNews();
        },
        methods:{
            getNews:function(){
                //显示加载中动画
                uni.showNavigationBarLoading();
                //请求数据
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
                    success:function(res){
                        console.log(res);
                        _self.newsList=res.data.split('--hcSplitor--');
                        //成功获取数据后结束下拉刷新
                        uni.stopPullDownRefresh();
                        //成功获取数据后隐藏加载动画
                        uni.hideNavigationBarLoading();
                    }
                })
            }
            
        }
    }
</script>

<style>
swiper-item{
    background: #00FF00;
    height: 200px;
    width: 100%;
}
.newlist{
    line-height: 2em;
    padding:20px;
}
</style>