本节学习任务

下拉刷新组件的使用

先看两个效果图

DEEAA10F-4057-4A52-9A4A-AA302E3275E8.png

E37CDFD4-F85E-4397-972B-9624A5640C24.png

下面围绕这个进行展开

<template>
<div class="page">
    <list class="list" >
                    <!--下拉刷新组件-->
        <refresh @pullingdown="pullingdown" :display="showLoading" @refresh="onrefresh" class="refresh">
            <!--<loading-indicator class="indicator"></loading-indicator>-->
            <image src="http://ww3.sinaimg.cn/large/006tNbRwly1feoqhig367g306r06rglx.gif" class="indicator"></image>
            <text class="loading-title">下拉刷新</text>
        </refresh>
                  <!--列表-->
        <cell v-for="i in num" class="cell">
            <text class="text">{{i}}</text>
        </cell>
    </list>
</div>
</template>

代码虽然不多,但是包含了很多小的细节,我一一进行讲解

1.pullingdown 事件,这个事件是连续的,系统只要检测的用户手有下拉的行为就会触发这个事件,这个事件会传一个参数对象,具体的值如下

dy: 前后两次回调滑动距离的差值
pullingDistance: 下拉的距离
viewHeight: refreshView 高度
type: "pullingdown" 常数字符串

2.refresh 刷新事件,当下拉的距离大于组件的高度,如果此时没有放✋,不会触发,一旦放手就会触发这个事件
3.display 决定了下拉组件的悬停显示效果,当触发refresh 事件时,务必设置这个值为'show',这样就会出现<refresh>悬停在list或者scroller组件头部的效果,这个时候,我们请求网络数据,一旦完成,就将display的值设置为hide,悬停动画消失
4.如果子组件为<loading-indicator>,这个时候要注意一下,display 的值会决定它的显示或者隐藏,比如你设置为‘show’ 则子组件<loading-indicator>会显示出来

js 代码如下

<script>    
export default{
    data(){
        return{
            num:3,
            showLoading:'false'
        }
    },
    methods:{
        pullingdown(event){
        },
        onrefresh(){
            this.showLoading = 'show'
            setTimeout(res=>{
                // 模拟网路请求
                this.num=4;
                this.showLoading = 'hide'
            },2000)
        }
    }
}
</script>

布局代码如下

<style>
.page{
    display: flex;
    flex-direction: column;
}
.list{
    flex:1;
    width:750px;
}
.cell{
    background-image:linear-gradient(to top ,#F0AD4E,#F8C433);
    width:750px;
    height: 200px;
    text-align: center;
}
.text{
    font-size:50px;
    color:white;
    text-align: center;
    line-height: 200px;
    height: 200px;
}
.refresh{
    width:750px;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
}
.indicator{
    width:100px;
    height: 100px;
    color:green;
}
</style>

注意

下拉刷新组件的高度和上拉加载组件的高度设置基本一致,如果不指定高度,以子组件的高度为自己的高度。