easespace-ui v1.0.6

PullRefresh 下拉刷新

介绍

用于提供下拉刷新的交互操作。

引入

  "usingComponents": {
    "PullRefresh": "/easespace-ui/PullRefresh/index",
  }

代码演示

基础用法

下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 status 设置为 false，表示加载完成。

<pull-refresh status="{{status}}" bind:refresh="onRefresh">
  <p>刷新次数: {{ count }}</p>
</pull-refresh>

data:{
  status: false,
  count: 0
}
const onRefresh = () => {
      setTimeout(() => {
        wx.showToast('刷新成功');
        this.setData({
          status: false,
          count: this.data.status+1
        })
      }, 1000);
};

自定义提示

通过插槽可以自定义下拉刷新过程中的提示内容。

<PullRefresh headHeight="{{80}}" useSlot="{{useSlot}}" status="{{status}}" bind:refresh="refresh2" bind:change="statusChange">
  <view class="demo-van-pull-refresh">
      自定义下拉
  </view>
  <view slot="header">
    <image wx:if="{{distance < 80}}" class="doge" style="transform: scale({{distance / 80}})" src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png" mode=""/>
    <image wx:else class="doge" src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg" mode=""/>
  </view>
</PullRefresh>
data:{
  status: false,
  distance: 0
}
statusChange(e){
    this.setData({
      distance: e.detail.distance
    })
}

API

Props

useSlot

Events

Slots

由于微信小程序无作用域插槽，无法在插槽获取distance，所以可以通过change事件来实时获取，处理不同的逻辑

使用插槽时一定要配置useSlot，否则可能会产生内容异常

常见问题

PullRefresh 的内容未填满屏幕时，只有一部分区域可以下拉？

默认情况下，下拉区域的高度是和内容高度保持一致的，如果需要让下拉区域始终为全屏，可以给 包裹内容 设置一个与屏幕大小相等的最小高度：

<pull-refresh >
  <view style="min-height: 100vh;" /></view>
</pull-refresh>

PullRefresh 的包裹的内容无法滚动

由于监听事件使用的是catch:touchmove 导致无法滚动，这里为什么不适用bind:touchmove, 由于bind:touchmove触发的频率很低，导致在手机端ui更新不及时产生卡顿. 如果包裹的内容需要滚动，在外层可以使用scroll-view、

<pull-refresh>
  <scroll-view style="min-height: 100vh;" /></view>
</pull-refresh>