weex-19-refresh组件
weex-19-refresh组件
酷走天涯
发布于 2018-09-14 15:18:11
发布于 2018-09-14 15:18:11
本节学习任务
下拉刷新组件的使用
先看两个效果图
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>注意
下拉刷新组件的高度和上拉加载组件的高度设置基本一致,如果不指定高度,以子组件的高度为自己的高度。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.06.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录