更新记录

1.0.2（2025-02-11） 下载此版本

兼容uniappx羡慕； 修复部分情况下滑动会超出边界的问题

1.0.1（2025-02-09） 下载此版本

优化部分代码-后续支持app-uvue

1.0.0（2025-02-09） 下载此版本

暂不支持app-uvue，后续版本会支持

平台兼容性

rice-swipe-action 滑动单元格 -同时兼容uniapp和uniappx

可以通过左右滑动来展示不同操作按钮的ios风格滑动单元格组件。兼容uniapp/uniappx。同时支持app，微信小程序和h5移动端。

在app端和小程序的vue页面中为了提高交互体验，避免逻辑层和渲染层之间交互的通信折损，本组件在app端使用了renderjs技术，在微信小程序端使用了wxs技术，可以达到流畅的体验。

在uniappx项目中使用见下方uniappx代码示例

代码示例

基本使用，rice-swipe-action-item 可以单独使用，也可以结合 rice-swipe-action 一起使用。支持ios风格的滑动动画效果和普通的动画效果

• 内部按钮可以通过 leftMenu 和 rightMenu 参数配置，此参数为一个数组，元素为对象，可以配置按钮的文字和style样式，非必要请不要配置按钮的宽高，宽高会根据内容自动适配。
• 在uniappx中 leftMenu 和 rightMenu 的类型为 SwipeMenu[]，可以从组件中导入。SwipeMenu 类型中的style 为 UTSJSONObject 类型。
• 左右按钮也可以通过slot插槽进行配置。使用插槽时，内部按钮的点击事件menuClick将生效，按钮的点击事件可以自己编写。(微信小程序左右区域使用slot插槽时，受限于小程序插槽和wxs的限制，滑动风格不是ios的风格，其他端没这个问题)

<template>
    <rice-swipe-action :customStyle="{marginTop:'12rpx'}">
        <rice-swipe-action-item :leftMenu="leftMenu" :rightMenu="rightMenu"
            :customStyle="{borderBottom: '1px solid #f5f6f7'}" name="swipe" @menuClick="menuClick" @contentClick="contentClick">
            <template #default>
                <view class="box">左右都可以滑动的单元格</view>
            </template>
        </rice-swipe-action-item>
        <!-- 插槽 -->
        <rice-swipe-action-item>
            <template #default>
                <view class="box">左右都可以滑动的单元格</view>
            </template>
            <template #right>
                <button type="primary" size="mini" @click="btnClick">确定</button>
                <button type="warn" size="mini">取消</button>
            </template>
        </rice-swipe-action-item>
    </rice-swipe-action>
</template>
<script setup>
    import { ref } from "vue"
    const leftMenu = ref([{
        text: "删除",
        style: {
            backgroundColor: "#ee0a24",
            color: "#fff",
            fontSize: '30rpx'
        },
    }])
    const rightMenu = ref([{
        text: "删除",
        style: {
            backgroundColor: "#ee0a24",
        },
    }, {
        text: '编辑',
        style: {
            backgroundColor: "#07c160",
        },
    }])

    //操作按钮的点击
    function menuClick(e) {
        console.log('按钮的index', e.index, 'name', e.name, 'direction', e.direction)
    }
    function btnClick() {
        console.log('btnClick')
    }
    function contentClick() {
        console.log('contentClick')
    }
</script>

<style scoped>
    .box {
        padding: 32rpx 20rpx;
        box-sizing: border-box;
    }
</style>

使用双向绑定

<template>
    <button type="primary" @click="show=show=='none'?'right':'none'">{{show=='none'?'打开':'关闭'}}右侧单元格</button>
    <rice-swipe-action-item v-model="show" :rightMenu="rightMenu">
        <template #default>
            <view class="box">v-model双向绑定-{{show}}</view>
        </template>
    </rice-swipe-action-item>
</template>
<script setup>
    import { ref } from "vue"
    const show = ref('none')
    const leftMenu = ref([{
        text: "删除",
        style: {
            backgroundColor: "#ee0a24",
            color: "#fff",
            fontSize: '30rpx'
        },
    }])
</script>

异步关闭

• 把rice-swipe-action-item 的 autoClose 参数设置为false即可，在需要关闭单元格的时候，可以改变v-model/modelValue的值或者调用组件的close方法即可关闭单元格，注意不是 rice-swipe-action 的autoClose

<template>
    <rice-swipe-action>
        <rice-swipe-action-item v-model="show" :autoClose="false" :rightMenu="rightMenu"
            :customStyle="{borderBottom: '1px solid #f5f6f7'}" name="swipe" ref="swipe" @menuClick="menuClick">
            <template #default>
                <view class="box">异步关闭单元格-{{show}}</view>
            </template>
        </rice-swipe-action-item>
    </rice-swipe-action>
</template>
<script setup>
    import { ref } from "vue"
    const rightMenu = ref([{
        text: "删除",
        style: {
            backgroundColor: "#ee0a24",
        },
    }, {
        text: '编辑',
        style: {
            backgroundColor: "#07c160",
        },
    }])

    //操作按钮的点击
    const show = ref('none')
    const swipe = ref(null)
    function menuClick(e) {
        uni.showLoading({
            title: '加载中…'
        })
        setTimeout(() => {
            uni.hideLoading()
            show.value = 'none'
            // swipe.value?.close()
        }, 2000)
    }
</script>

uniappx 项目中使用

<template>
    <rice-swipe-action  ref="swipe">
        <rice-swipe-action-item  :leftMenu="leftMenu" :rightMenu="leftMenu"
            ref="swipeItem" name="first"  @menuClick="menuClick" @contentClick="contentClick">
            <template #default>
                <view class="box">
                    <text>this is default 左右两侧滑动</text>
                </view>
            </template>
        </rice-swipe-action-item>
    </rice-swipe-action>
</template>

<script setup>

    import { SwipeMenu } from "@/uni_modules/rice-swipe-action"

    const leftMenu = ref<SwipeMenu[]>([{
        text: '删除',
        style: {
            backgroundColor: 'red',
            color: '#fff',
            fontSize: '36rpx'
        },
    }, {
        text: '编辑',
        style: {
            backgroundColor: '#52a8ff',
            color: "#000"
        },
    }])

    function menuClick(e:UTSJSONObject) {
        console.log('按钮的index', e['index'], 'name', e['name'], 'direction', e['direction'])
    }
    function btnClick() {
        console.log('btnClick')
    }
    function contentClick() {
        console.log('contentClick')
    }

    //调用组件的方法
    const swipe = ref<RiceSwipeActionComponentPublicInstance | null>(null)
    const swipeItem = ref<RiceSwipeActionItemComponentPublicInstance | null>(null)

    function open(){
        swipeItem.value?.open?.('left')
    }

    function closeAll() {
        swipe.value?.closeAll?.()
    }

</script>

API

Props

rice-swipe-action

rice-swipe-action-item

Events

rice-swipe-action-item

Slots

rice-swipe-action-item

组件方法

通过ref调用

rice-swipe-action

rice-swipe-action-item

类型定义

组件导出以下类型定义：

import {
    SwipeMenu,
    SwipeDirection,
} from "@/uni_modules/rice-swipe-action"