LimePullRefresh 下拉刷新

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

文档

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 onScroll = (event: UniScrollEvent) => {
//   isEnabled.value = event.detail.scrollTop == 0
// }
// 当滚动组佣触顶时
// const onScrolltoupper = () => {
//   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)

属性名	类型	默认值	必填	说明
​​v-model​​	Boolean	true	否	双向绑定，控制组件启用状态 (true启用/false禁用)
​​disabled​​	Boolean	false	否	直接禁用组件 (优先级高于 modelValue)
​​headerHeight​​	string | number	50	否	提示区域高度 (支持单位：px/rpx/%等)
​​loadingTexts​​	string[]	['下拉刷新','松手刷新','正在刷新','刷新完成']	否	状态提示文本数组，顺序为：[下拉中, 可松手, 加载中, 完成]
​​maxDrag​​	string | number	80	否	最大下拉高度 (支持单位：px/rpx)
​​loading​​	Boolean	false	否	手动控制加载状态 (通常用于异步操作控制)
​​threshold​​	number | string	50	否	触发刷新的阈值（单位：px）
​​transitionDuration​​	number	300	否	回弹动画时长（单位：ms）
​​doneDuration​​	number	0	否	刷新完成后的停留时间（单位：ms）
​​damping​​	number	0.2	否	阻尼系数 (0-1)，值越小超出 maxDrag 后的阻力效果越明显

事件列表

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

插槽

插槽名称	说明	参数	必需
​​default​	包裹页面内容/滚动容器区域	无	是
​​header​​​	自定义下拉刷新头部提示区域	{ status: RefreshStatus, progress: number }	否

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

打赏

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

源代码

组件源码