weex-19-refresh组件

本节学习任务

下拉刷新组件的使用

先看两个效果图

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>

注意

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