更新记录

0.0.1（2025-01-04） 下载此版本

• init

平台兼容性

lime-swipe-cell 滑动操作

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

安装

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

代码演示

基础操作

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

<l-swipe-cell>
    <l-cell title="左滑单操作" note="辅助信息" :bordered="false" />
    <template #left>
        <view class="btn delete-btn"><text style="color: white;">选择</text></view>
    </template>
    <template #right>
        <view class="btn delete-btn"><text style="color: white;">删除</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 style="color: white;">删除</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 style="color: white;">选择</text></view>
    </template>
    <template #right>
        <view class="btn delete-btn"><text style="color: white;">删除</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 style="color: white;">选择</text></view>
    </template>
    <template #right>
        <view class="btn edit-btn" @click="onDelete"><text style="color: white;">删除</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 为 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

Slots

打赏

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