Refresher 下拉刷新

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

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Refresher",
  3.     "usingComponents": {
  4.         "wux-refresher": "../../dist/refresher/index"
  5.     }
  6. }

示例

  1. <wux-refresher id="wux-refresher" bind:pulling="onPulling" bind:refresh="onRefresh" bind:loadmore="onLoadmore" scrollTop="{{scrollTop}}">
  2.     <view class="weui-panel weui-panel_access">
  3.         <view class="weui-panel__bd">
  4.             <view class="weui-media-box weui-media-box_text" wx:for="{{ items }}" wx:key="">
  5.                 <view class="weui-media-box__title weui-media-box__title_in-text">{{ item.title }}</view>
  6.                 <view class="weui-media-box__desc">{{ item.content }}</view>
  7.             </view>
  8.         </view>
  9.     </view>
  10. </wux-refresher>
  1. import { $startWuxRefresher, $stopWuxRefresher, $stopWuxLoader } from '../../dist/index'
  3. const getList = (count = 10, step = 0) => [...new Array(count)].map((n, i) => ({ title: `Pull down ${i + step}`, content: 'Wux Weapp' }))
  5. Page({
  6.     data: {
  7.         items: [],
  8.         count: 0,
  9.         scrollTop: 0,
  10.     },
  11.     onLoad() {
  12.         $startWuxRefresher()
  13.     },
  14.     onPageScroll(e) {
  15.         this.setData({
  16.             scrollTop: e.scrollTop
  17.         })
  18.     },
  19.     onPulling() {
  20.         console.log('onPulling')
  21.     },
  22.     onRefresh() {
  23.         console.log('onRefresh')
  25.         this.setData({ count: 10 })
  27.         setTimeout(() => {
  28.             this.setData({ items: getList() })
  29.             $stopWuxRefresher()
  30.         }, 3000)
  31.     },
  32.     onLoadmore() {
  33.         console.log('onLoadmore')
  34.         setTimeout(() => {
  35.             this.setData({
  36.                 items: [...this.data.items, ...getList(10, this.data.count)],
  37.                 count: this.data.count + 10,
  38.             })
  40.             if (this.data.items.length < 30) {
  41.                 $stopWuxLoader()
  42.             } else {
  43.                 console.log('没有更多数据')
  44.                 $stopWuxLoader('#wux-refresher', this, true)
  45.             }
  46.         }, 3000)
  47.     }
  48. })

视频演示

Refresher

API

Refresher props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-refresher
pullingIcon string 下拉时图标 -
pullingText string 下拉时文字描述 下拉刷新
refreshingIcon string 刷新时图标 -
refreshingText string 刷新时文字描述 正在刷新
disablePullingRotation boolean 是否禁用图标旋转效果 false
distance number 下拉的距离 30
prefixLCls string 自定义类名前缀，对应上拉加载内容 wux-loader
isShowLoadingText boolean 是否显示 loadingText false
loadingText string 上拉加载时文字描述 正在加载
loadNoDataText string 上拉加载且没有数据时文字描述 没有更多数据
scrollTop number 页面滚动距离，上拉加载时需要设置 0
bind:pulling function 下拉开始的回调函数 -
bind:refresh function 下拉完成的回调函数 -

Refresher slot

名称 描述
- 自定义内容

Refresher.method

  • $startWuxRefresher 开始下拉刷新
  • $stopWuxRefresher 停止当前下拉刷新
  • $stopWuxLoader 停止当前上拉加载
  1. import { $startWuxRefresher, $stopWuxRefresher, $stopWuxLoader } from '../../dist/index'
  3. $startWuxRefresher()