更新记录

0.0.6（2025-05-08） 下载此版本

• fix: 修复uniappx 微信小程序 左右插槽 只显示一个元素

0.0.5（2025-04-25） 下载此版本

• feat: 兼容uniappx 鸿蒙next

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

• chore: 更新文档

平台兼容性

uni-app(4.44)

uni-app x(4.61)

lime-swipe-cell 滑动操作

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

文档

🚀 swipe-cell【站点1】 🌍 swipe-cell【站点2】 🔥 swipe-cell【站点3】

安装

在插件市场导入即可，首次导入可能需要重新编译

代码演示

基础操作

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

Events

Methods

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

Slots

打赏

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