更新记录

0.0.4（2025-04-10） 下载此版本

• chore: 更新文档

0.0.3（2025-04-10） 下载此版本

• feat: 更新依赖

0.0.2（2025-04-10） 下载此版本

• chore: 更新文档

平台兼容性

lime-pull-refresh 下拉刷新

• 下拉刷新的交互操作，可用于页面各scroll-view、list-view或其它容器中，提供灵活的状态控制和自定义能力。
• 插件依赖lime-style,lime-shared,lime-loading不喜勿下

文档

pull-refresh

安装

插件市场导入

使用

基于页面

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

<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>

// 反正你想尽各种方法，让它达到启用条件，一般滚动条处于顶部时可以启用。
// 例如 页面或滚动组件 的scrollTop为0时可以启用
const isEnabled = ref(true)

const list = ref<number[]>([]);
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 == 0
})

基于滚动组件

<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>

// 反正你想尽各种方法，让它达到启用条件，一般滚动条处于顶部时可以启用。
// 例如 页面 或 滚动组件 的scrollTop为0时可以启用
const isEnabled = ref(true)

const list = ref<number[]>([]);
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  = (event: UniScrollEvent) => {
//   isEnabled.value = event.detail.scrollTop == 0
// }
// 当滚动组佣触顶时
// const toupper = () => {
//   isEnabled.value = true
// }

状态插槽

使用 #header 插槽自定义各状态下的显示内容,当你下拉时progress可以展示进度

<l-pull-refresh :loading="loading2" @refresh="onRefresh2">
    <template #header="{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>

查看示例

组件包内置演示示例，直接使用以下标签查看效果：

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

插件标签

• 默认 l-pull-refresh 为 component
• 默认 lime-pull-refresh 为 demo

Vue2 兼容

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

API

组件属性 (Props)

事件列表

插槽

type RefreshStatus = 
  | 'initial'    // 初始状态
  | 'pulling'    // 下拉中（未达阈值）
  | 'ready'      // 可刷新状态（达到阈值）
  | 'loading'    // 加载中状态
  | 'rebounding' // 回弹动画中
  | 'done';      // 刷新完成 

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。