milkui-pullrefresh v0.1.0

milkui-pullrefresh

下拉/上拉刷新

Overview

Example

import PullRefresh from 'milkui-pullrefresh';

<PullRefresh
  ref={(f) => { this.pullRefresh = f; }}
  topLoad
  onTopLoad={this.events.loadTopData}
  distanceIndex={3}
  bottomLoad
  onBottomLoad={this.events.loadBottomData}
>
  <div className="demo__pullrefresh__list">
    {list.map((item) =>
      <div key={item} className="demo__pullrefresh__item">{item}</div>
    )}
  </div>
</PullRefresh>

// mock loadTopData
loadTopData() {
  const me = this;
  const { list } = me.state;
  let newList = Array.from(list);
  const firstItem = newList[0];
  for (let i = 1; i < 11; i++) {
    newList = [firstItem - i, ...newList];
  }
  setTimeout(() => {
    me.setState({ list: newList }, () => {
      me.pullRefresh.onTopLoaded();
    });
  }, 2000);
}

// mock loadBottomData
loadBottomData() {
  const me = this;
  const { list } = me.state;
  let newList = Array.from(list);
  const lastItem = newList[newList.length - 1];
  for (let i = 1; i < 11; i++) {
    newList = [...newList, lastItem + i];
  }
  setTimeout(() => {
    me.setState({ list: newList }, () => {
      me.pullRefresh.onBottomLoaded();
    });
  }, 2000);
}

Properties

Develop

cnpm i milk-dev -g    # dev tool

cnpm install

npm start

Links

• Issues