更新记录

1.0.1（2026-03-15） 下载此版本

优化

1. Props 改为 TypeScript 类型化定义，移除 PropType 运行时验证依赖
2. btnWidth 注释补充单位说明（rpx）
3. 文档示例改为 <script setup lang="ts"> 风格，组件名改为 kebab-case
4. 文档 callback 事件回调参数补充准确的类型格式 { type, value }
5. 修复差异化中飞书小程序重复列出的误误，京东小程序归入已测试列表

平台兼容性

uni-app(4.25)

uni-app x(4.15)

da-swipe-action

一个基于 Vue3 的滑动操作组件，丝滑的体验，值得一试。

组件一直在更新，遇到问题可在下方讨论。

关于使用

可在右侧的使用 HBuilderX 导入插件或下载示例项目ZIP，方便快速上手。

可通过下方的示例及文档说明，进一步了解使用组件相关细节参数。

插件地址：https://ext.dcloud.net.cn/plugin?id=

组件示例

<template>
  <da-swipe-action :data="datalist" :actions="actionBtns" @callback="handleCallback">
    <template #default="{ item }">
      <view class="list-item" style="padding: 20rpx;background: #fafafa;border-bottom: 1px solid #eee;">
        <view class="list-item-id">{{ item.id }}</view>
        <view class="list-item-title">{{ item.title }}</view>
      </view>
    </template>
  </da-swipe-action>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const datalist = ref([
  { id: '1', title: '小米' },
  { id: '2', title: '魅族' },
  { id: '3', title: '一加' },
])

const actionBtns = ref([
  {
    prop: 'edit',
    name: '编辑',
    background: '#00aaff',
    color: '#fff',
  },
  {
    prop: 'del',
    name: '删除',
    background: '#ff5500',
    color: '#fff',
  },
])

function handleCallback({ type, value }: { type: string; value: any }) {
  console.log('handleCallback ==>', type, value)
}
</script>

组件参数

组件事件

组件版本

v1.0.1

差异化

已通过测试

• H5 页面
• 微信小程序
• 支付宝、钉钉小程序
• 字节跳动、抖音、今日头条小程序
• 百度小程序
• 飞书小程序
• QQ 小程序
• 京东小程序

未测试

• 快手小程序由于非企业用户暂无演示
• 快应用、360 小程序因 Vue3 支持的原因暂无演示

开发组

@CRLANG