@wines/refresher v1.5.1

@wines/refresher

Refresher 下拉刷新

用于展现下拉刷新操作，将自定义内容包裹在 refresher 组件内。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Refresher",
  "usingComponents": {
    "wux-cell": "@wines/cell",
    "wux-cell-group": "@wines/cell-group",
    "wux-refresher": "@wines/refresher"
  }
}

示例

<wux-refresher
 id="wux-refresher"
 bind:pulling="onPulling"
 bind:refresh="onRefresh"
 bind:loadmore="onLoadmore"
 scrollTop="{{ scrollTop }}"
>
	<view class="panel panel_access">
		<view class="panel__bd">
			<view class="media-box media-box_text" wx:for="{{ items }}" wx:key="index">
				<view class="media-box__title media-box__title_in-text">{{ item.title }}</view>
				<view class="media-box__desc">{{ item.content }}</view>
			</view>
		</view>
	</view>
</wux-refresher>

示例 ScrollView

<view>
	<view class="header">Headline</view>
	<view class="refresher-area">
		<wux-refresher
		 id="wux-refresher"
		 disable-pulling="{{disablePulling}}"
		 bind:pulling="onPulling"
		 bind:refresh="onRefresh"
		 bind:loadmore="onLoadmore"
		 view-mode="ScrollView"
		>
			<view class="panel panel_access">
				<view class="panel__bd">
					<view class="media-box media-box_text" wx:for="{{ items }}" wx:key="index">
						<view class="media-box__title media-box__title_in-text">{{ item.title }}</view>
						<view class="media-box__desc">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</wux-refresher>
	</view>
</view>

import { $wuxRefresher } from '@wines/refresher';

const getList = (count = 10, step = 0) => {
  return [...new Array(count)].map((_n: number, i) => ({
    title: `Pull down ${i + step}`,
    content: 'Wux Weapp',
  }));
};

Page({
  data: {
    items: [] as unknown[],
    count: 0,
    scrollTop: 0,
  },
  onLoad() {
    const refresher = $wuxRefresher();
    refresher && refresher.refresh();
  },
  onPageScroll(e) {
    this.setData({
      scrollTop: e.scrollTop,
    });
  },
  onPulling() {
    console.log('onPulling');
  },
  onRefresh() {
    console.log('onRefresh');

    this.setData({ count: 10 });

    setTimeout(() => {
      this.setData({ items: getList() });
      $wuxRefresher().refreshDone();
    }, 3000);
  },
  onLoadmore() {
    console.log('onLoadmore');
    setTimeout(() => {
      this.setData({
        items: [...this.data.items, ...getList(10, this.data.count)],
        count: this.data.count + 10,
      });

      if (this.data.items.length < 30) {
        $wuxRefresher().loadmoreDone();
      } else {
        console.log('没有更多数据');
        $wuxRefresher().loadmoreDone(true);
      }
    }, 3000);
  },
});

API

Refresher props

Refresher slot

Refresher.method

• refresh 开始下拉刷新
• refreshDone 停止当前下拉刷新
• loadmoreDone 停止当前上拉加载

import { $wuxRefresher } from '@wines/refresher';

$wuxRefresher().refresh()