weex-19-refresh组件

本节学习任务

下拉刷新组件的使用

先看两个效果图

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

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

下面围绕这个进行展开

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

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

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

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

js 代码如下

布局代码如下

注意

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