LimeSwipeCell 滑动操作

• 可以左右滑动来展示操作按钮的单元格组件
• 插件依赖lime-style,lime-shared不喜勿下

文档

swipe-cell

安装

在 导入即可，首次导入可能需要重新编译

代码演示

基础操作

SwipeCell 组件提供了 left 和 right 两个插槽，用于定义两侧滑动区域的内容。

<l-swipe-cell>
	<l-cell title="左滑单操作" note="辅助信息" :bordered="false" />
	<template #left>
		<view class="btn delete-btn"><text>选择</text></view>
	</template>
	<template #right>
		<view class="btn delete-btn"><text>删除</text></view>
	</template>
</l-swipe-cell>

默认打开

SwipeCell 组件提供了 opened可设置默认打开,如果存在left和right时，opened为数组。

<l-swipe-cell :opened="true">
	<l-cell title="左滑单操作" note="辅助信息" :bordered="false" />
	<template #right>
		<view class="btn delete-btn"><text>删除</text></view>
	</template>
</l-swipe-cell>
<l-swipe-cell :opened="[false, true]">
	<l-cell title="左滑单操作" note="辅助信息" :bordered="false" />
	<template #left>
		<view class="btn delete-btn"><text>选择</text></view>
	</template>
	<template #right>
		<view class="btn delete-btn"><text>删除</text></view>
	</template>
</l-swipe-cell>

异步关闭

通过传入 before-close 回调函数，可以自定义两侧滑动内容关闭时的行为。

<l-swipe-cell :beforeClose="beforeClose">
	<l-cell title="左滑双操作" note="辅助信息" :bordered="false" />
	<template #left>
		<view class="btn favor-btn"><text>选择</text></view>
	</template>
	<template #right>
		<view class="btn edit-btn" @click="onDelete"><text>删除</text></view>
	</template>
</l-swipe-cell>

// setup ts
let resolveClose: ((value: boolean) => void)|null = null;
let beforeClose= (direction: string):Promise<boolean> => {
	return new Promise((resolve)=>{
		if(direction == 'right') {
			resolveClose = resolve
		} else {
			resolve(true)
		}
	})
}

const onDelete = () => {
	console.log('onDelete')
	uni.showModal({
		title: '温馨提示',
		content: '确定要删除吗？',
		success(res) {
			if(res.confirm) {
				resolveClose?.(true)
			}
		}
	})
}


// 选项式
export default {
	data() {
		return {}
	},
	methods: {
		beforeClose(direction) {
			return new Promise((resolve)=>{
				if(direction == 'right') {
					this.resolveClose = resolve
				} else {
					resolve(true)
				}
			})
		},
		onDelete() {
			console.log('onDelete')
			uni.showModal({
				title: '温馨提示',
				content: '确定要删除吗？',
				success:(res) => {
					if(res.confirm) {
						this.resolveClose?.(true)
					}
				}
			})
		}
	}
}

禁止关闭

<l-swipe-cell :disabled="true">
	<l-cell title="禁用状态" note="不可滑动操作" />
	<template #right>
		<view class="btn delete-btn">删除</view>
	</template>
</l-swipe-cell>

插件标签

• 默认 l-swipe-cell 为 component
• 默认 lime-swipe-cell 为 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

参数	说明	类型	默认值
disabled	是否禁用滑动	boolean	false
opened	操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态	boolean|boolean[]	-
beforeClose	关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise	(direction):Promise<boolean>	-

Events

名称	说明
open	打开面板时触发	`direction: 'left'
close	关闭面板时触发	-

Methods

通过ref获取组件内部方法关闭，组件类型为LSwipeCellComponentPublicInstance

名称	说明
close	手动关闭面板

Slots

名称	说明
default	默认显示的内容
left	左侧滑动区域的内容
right	右侧滑动区域的内容

打赏

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

源代码

组件源码