uniapp 滑动删除功能实现（右侧滑动展示菜单功能）

桃扇骨 2021-07-25 22:19 1963阅读 0赞

## 列表滑动删除功能 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
这种滑动删除功能最早我是从QQ上看到的。  
这种效果在Uniapp插件市场中是已经有现成的。

[滑动删除插件链接：https://ext.dcloud.net.cn/plugin?id=208][https_ext.dcloud.net.cn_plugin_id_208]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]

## wkiwi-swipe-action组件的使用 ##

#### 引用wkiwi-swipe-action组件 ####

import wkiwiSwipeAction from "@/components/wkiwi-swipe-action"

#### 注册wkiwi-swipe-action组件 ####

components: { wkiwiSwipeAction},

#### wkiwi-swipe-action组件的使用 ####

<wkiwi-swipe-action :options="[
        { 
                text: '置顶',
                style: { 
                        backgroundColor: '#C7C6CD'
                }
        }, { 
                text: '删除',
                style: { 
                        backgroundColor: '#dd524d'
                }
        }
    ]">
        :messagesList="messages"
    </wkiwi-swipe-action>
    messages消息列表就是消息的数组。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/14b94487b21640a292b52e124ed10da3.png
[https_ext.dcloud.net.cn_plugin_id_208]: https://ext.dcloud.net.cn/plugin?id=208
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/1e11ceaf6208447788386584e26fb1e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/5e72d796af144b859eb8f8b1db9e2c17.png