【uni-app】uniapp如何实现左滑删除以及改造uni-ui中的swiperAction

鱼子酱酱酱

已于 2025-04-27 11:32:15 修改

阅读量1.3w

点赞数 14

分类专栏： uniapp 文章标签：前端 uniapp vue.js 微信小程序

于 2022-03-23 13:45:18 首次发布

本文链接：https://blog.youkuaiyun.com/wuguidian1114/article/details/123683506

版权

本文介绍了如何在uni-app中利用uni-ui的uni-swipe-action组件实现左滑删除功能，并提供了改造方法以支持显示图片。通过监听touch事件和修改源码，实现了在左右滑动选项中添加图片展示，同时给出了代码示例和实际效果。改造后的组件不仅兼容多种平台，还增加了自定义图片的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左滑删除或者置顶之类的功能我们经常要实现，类似于微信的删除聊天框的结构我就不贴图了

1-如何在uniapp中实现左滑删除

我使用的是uni-ui中的swiperAction 不得不说性能还是不错的。大家想自己手动封装这个框架也是可以的，可以下载下来源码看看人家的实现思路，在h5和小程序上主要就是使用touchstart和touchend来监控的

插件地址：uni-swipe-action 滑动操作 - DCloud 插件市场

文档地址：action文档

代码参考：这里演示的是最常用的可以去官网看看其他内容

<uni-swipe-action>
    //right-options 右滑出现的内容。left-options：左滑出现的内容
    <uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
        <view>这里是未滑动之前显示的内容</view>
    </uni-swipe-action-item>
</uni-swipe-action>

export de

最低0.47元/天解锁文章