@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

| 参数 | 类型 | 描述 | 默认值 | | ---------------------- | ------------------------ | ----------------------------------------------------- | ------------- | | prefixCls | string | 自定义类名前缀 | wux-refresher | | disablePulling | boolean | 是否禁用下拉刷新, 默认未禁用 | - | | pullingIcon | string | 下拉时图标 | - | | pullingText | string | 下拉时文字描述 | 下拉刷新 | | pullingActiveText | string | 下拉时达到激活点时文字描述 | 释放刷新 | | refreshingIcon | string | 刷新时图标 | - | | refreshingText | string | 刷新时文字描述 | 正在刷新 | | viewMode | NormalView, ScrollView | 当前的视图模式 | NormalView | | disablePullingRotation | boolean | 是否禁用图标旋转效果 | false | | distance | number | 下拉的距离 | 30 | | refreshThreshold | number | 页面 scrollTop 再什么范围内允许 pull refresh | 30 | | loadmoreThreshold | number | 距离底部在什么范围内允许提前执行 loadmore | 30 | | prefixLCls | string | 自定义类名前缀，对应上拉加载内容 | wux-loader | | isShowLoadingText | boolean | 是否显示 loadingText | false | | loadingText | string | 上拉加载时文字描述 | 正在加载 | | loadNoDataText | string | 上拉加载且没有数据时文字描述 | 没有更多数据 | | scrollTop | number | 页面滚动距离，上拉加载时需要设置, ScrollView 模式无效 | 0 | | bind:pulling | function | 下拉开始的回调函数 | - | | bind:refresh | function | 下拉完成的回调函数 | - |

Refresher slot

| 名称 | 描述 | | ---- | ---------- | | - | 自定义内容 |

Refresher.method

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

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

$wuxRefresher().refresh()