Refresher

数据加载 / Refresher下拉刷新组件

说明

Refresher组件是在Content组件下使用, 并提供了下拉刷新的功能. 使用前需要将Refresher组件放在Content组件内所有内容的前面, 并加上slot="refresher"属性. 如果Refresher组件使用完毕希望禁用, 请使用enabled属性, 而不是使用v-if指令.

事件

事件传递组件的this, 可用的两个方法为: complete/cancel. 当然可以使用ref获取组件的实例

注意

目前这个组件只适合在原生滚动下使用, 当使用js滚动时会异常

关于指示器RefresherContent

这个组件是可以定制化的

源码:: refresher/refresher.vue , line 2
参考:: component:Content

传入属性 / Props:

Name	Type	Attributes	Default	Description
`closeDuration`	Number	<optional>	`280`	回复到 inactive 状态的动画时间
`enabled`	Boolean	<optional>	`true`	组件是否可用
`pullMax`	Number	<optional>	`200`	下拉的最大值, 超过则直接进入 refreshing状态
`pullMin`	Number	<optional>	`70`	下拉进入refreshing状态的最小值
`snapbackDuration`	Number	<optional>	`280`	回复到 refreshing 状态的动画时间

插槽 / Slots:

Name	Description
`空`	指示器RefresherContent组件的插槽

对外事件 / Fires:

component:Refresher#onRefresh - 进入 refreshing 状态时触发,event: 事件传递组件的this
component:Refresher#onPull - 下拉并且看到了refresher,event: 事件传递组件的this
component:Refresher#onStart - 开始下拉的事件,event: 事件传递组件的this

用法 / Usages

<Page>
   <Header>
       <Navbar>
           <Title>Refresher</Title>
       </Navbar>
   </Header>
   <Content>
       <Refresher slot="refresher" @onRefresh="doRefresh($event)" @onPull="doPulling($event)">
           <RefresherContent pullingText="下拉刷新..." refreshingText="正在刷新..."></RefresherContent>
           </Refresher>
       <List>
           <Item v-for="i in list">{{i}}</Item>
       </List>
   </Content>
</Page>


// ...

methods: {
   doRefresh(ins){
     let _start = this.i;
     setTimeout(() => {
       for (; (10 + _start) > this.i; this.i++) {
         this.list.unshift(`item - ${this.i}`)
       }
       // 当前异步完成
       ins.complete();
       console.debug('onInfinite-complete')
     }, 500)
   },
 },

成员 / Members

(inner) currentY :Number

源码:: refresher/refresher.vue , line 112

当前的点

类型 / Type:

Number

(inner) deltaY :Number

源码:: refresher/refresher.vue , line 118

起始点和当前点的距离

类型 / Type:

Number

(inner) progress :Number

源码:: refresher/refresher.vue , line 124

表示对当前进度.

0: 原始状态,为下拉
=1: 到达refreshing状态的最小值
>1: 超过refreshing状态的最小值

类型 / Type:

Number

(inner) startY :Number

源码:: refresher/refresher.vue , line 106

下拉的起始点

类型 / Type:

Number

(inner) state :String

源码:: refresher/refresher.vue , line 93

Refresher 的状态, 可以使下面的一个值:

inactive - Refresher 当前时隐藏状态, 没有下拉或者刷新
pulling - Refresher 当前正在被下拉, 但是还没达到触发刷新的点
cancelling - 还没达到触发刷新的点时, 用户松手, 动画恢复完毕后改为inactive状态
ready - 用户已经下拉到达触发点, 如果用户松手, 则进入refreshing状态
refreshing - Refresher 处于刷新状态, 等待异步操作的完成. 一旦执行了refresh的 complete() 方法, Refresher 将进入 completing 状态.
completing - Refresher 的refreshing 状态结束, Refresher之后会执行关闭的动画, 如果动画结束, 则回退到inactive 状态.