LimeUI+1.2.0

主题

LimePullRefresh 下拉刷新组件 ​

一个功能丰富的下拉刷新组件，可用于页面、scroll-view、list-view或其它容器中。组件提供了灵活的状态控制和自定义能力，支持自定义下拉阈值、动画时长、阻尼系数等多种配置，满足各种复杂的下拉刷新交互需求。

插件依赖：lime-style、lime-shared、lime-loading

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-pull-refresh
  2. 导入后可能需要重新编译项目
  3. 在页面中使用l-pull-refresh组件

代码演示 ​

基于页面的下拉刷新 ​

通过v-model设置是否启用下拉刷新，loading设置加载状态，当下拉达到阈值松手会触发refresh事件。

html
<l-pull-refresh v-model="isEnabled" :loading="loading" @refresh="onRefresh">
  <view class="page">
    <view class="cell" v-for="item in list" :key="item">
      <text class="cell-text">{{item}}</text>
    </view>
  </view>
</l-pull-refresh>
js
// 反正你想尽各种方法，让它达到启用条件，一般滚动条处于顶部时可以启用。
// 例如 页面或滚动组件 的scrollTop为0时可以启用
const isEnabled = ref(true)
const loading = ref(false)

const list = ref([]);
for (let i = 0; i < 20; i++) {
  list.value.push(list.value.length + 1);
}

const onRefresh = () => {
  loading.value = true
  // 模拟请求中...
  setTimeout(() => {
    loading.value = false
    for (let i = 0; i < 20; i++) {
      list.value.push(list.value.length + 1);
    }
  }, 5000)
}

// 监听页面滚动，确保滚动到顶部时启用下拉刷新
onPageScroll(({ scrollTop }) => {
  isEnabled.value = scrollTop === 0
})

基于滚动组件的下拉刷新 ​

html
<l-pull-refresh v-model="isEnabled" :loading="loading" @refresh="onRefresh">
  <list-view style="height: 500px;" 
    @scroll="isEnabled = ($event as UniScrollEvent).detail.scrollTop == 0"
    @scrolltoupper="isEnabled = true">
    <list-item class="cell" v-for="item in list" :key="item">
      <text class="cell-text">{{item}}</text>
    </list-item>
  </list-view>
</l-pull-refresh>
js
const isEnabled = ref(true)
const loading = ref(false)

const list = ref([]);
for (let i = 0; i < 20; i++) {
  list.value.push(list.value.length + 1);
}

const onRefresh = () => {
  loading.value = true
  // 模拟请求中...
  setTimeout(() => {
    loading.value = false
  }, 5000)
}

// 当你是uniappx app端时，这两步可以省略。
// 当滚动组件scrollTop为0时
// const onScroll = (event: UniScrollEvent) => {
//   isEnabled.value = event.detail.scrollTop == 0
// }
// 当滚动组佣触顶时
// const onScrolltoupper = () => {
//   isEnabled.value = true
// }

自定义状态显示 ​

使用 #refresher 插槽自定义各状态下的显示内容，可以通过progress参数展示下拉进度

html
<l-pull-refresh :loading="loading" @refresh="onRefresh">
  <template #refresher="{status, progress}">
    <text v-show="status == 'pulling'">下拉刷新</text>
    <text v-show="status == 'ready'">松手刷新</text>
    <text v-show="status == 'loading'">加载中...</text>
    <text v-show="status == 'done'">刷新完成</text>
  </template>
  <list-view style="height: 500px;">
    <list-item class="cell" v-for="item in list" :key="item">
      <text class="cell-text">{{item}}</text>
    </list-item>
  </list-view>
</l-pull-refresh>

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-pull-refresh/components/lime-pull-refresh -->
<lime-pull-refresh />

插件标签说明 ​

标签名说明
l-pull-refresh组件标签
lime-pull-refresh演示标签

Vue2使用说明 ​

main.js中添加以下代码：

js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
v-model / modelValue双向绑定，控制组件启用状态booleantrue
disabled直接禁用组件（优先级高于modelValue）booleanfalse
refresherHeight提示区域高度string | number50
loadingTexts状态提示文本数组，顺序为：[下拉中, 可松手, 加载中, 完成]string[]['下拉刷新','松手刷新','正在刷新','刷新完成']
maxDrag最大下拉高度string | number80
loading手动控制加载状态booleanfalse
threshold触发刷新的阈值（单位：px）number | string50
transitionDuration回弹动画时长（单位：ms）number300
doneDuration刷新完成后的停留时间（单位：ms）number0
damping阻尼系数（0-1），值越小超出maxDrag后的阻力效果越明显number0.2

刷新状态说明 ​

状态值说明
initial初始状态
pulling下拉中（未达阈值）
ready可刷新状态（达到阈值）
loading加载中状态
rebounding回弹动画中
done刷新完成

Events 事件 ​

事件名说明回调参数
refresh当用户下拉达到阈值并释放时触发（需手动设置loading=false来结束刷新）-
update:modelValue组件启用状态变更时触发value: boolean
update:disabled禁用状态变更时触发value: boolean

Slots 插槽 ​

名称说明参数
default包裹页面内容/滚动容器区域-
refresher自定义下拉刷新头部提示区域{ status: RefreshStatus, progress: number }

主题定制 ​

组件提供了以下CSS变量，可用于自定义样式：

变量名称默认值描述
--l-pull-refresh-refresher-font-size$font-size刷新提示文字大小
--l-pull-refresh-refresher-color$text-color-2刷新提示文字颜色
--l-pull-refresh-loading-font-size$font-size加载中文字大小

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码