wxc-refresher

The <wxc-refresher> Component provide a pulldown-refresh function for some special containers, its usage and attributes are similar to the <loading> Component.

Rule

To be rendered properly, the <wxc-refresher> Component must appear inside the special Component such as <scroller>、<list>、<hlist>、<vlist>、<waterfall> .

Demo

Code Example

<template>
  <div class="wxc-demo">
    <list class="scroller" ref="scroller">
      <wxc-refresher ref="wxcRefresher"
                     scroller-ref="scroller"
                     main-text="下拉即可刷新(自定义)"
                     pulling-text="释放即可刷新(自定义)"
                     refreshing-text="加载中(自定义)"
                     :max-time="5000"
                     :text-width="240"
                     @wxcRefresh="onRefresh"
                     @wxcTimeout="onTimeout"></wxc-refresher>
      <cell>
        <!-- cell list -->
      </cell>
    </list>
  </div>
</template>

<script>
  import { WxcRefresher } from 'weex-ui';
  const modal = weex.requireModule('modal');
  export default {
    components: { WxcRefresher },
    methods: {
      onTimeout () {
        modal.toast({message:'timeout',duration:0});
      },
      onRefresh () {
        modal.toast({message:'refreshing...',duration:0});
      }
    }
  };
</script>

Further more, demo

API

Canceling Refreshing

<!-- <wxc-refresher ref="wxcRefresher"></wxc-popup> -->
this.$refs.wxcRefresher.wxcCancel();

Event

// refresh callback, refer to http://weex.apache.org/cn/references/components/refresh.html#refresh
@wxcRefresh="onRefresh"

// timeout callback
@wxcTimeout="onTimeout"

// pulling callback, refer to http://weex.apache.org/cn/references/components/refresh.html#pullingdown-v0-6-1
@wxcPullingDown="onPullingDown"