更新记录

1.0.0（2025-11-14） 下载此版本

• 首次发布：支持左右滑动、按钮点击、自动关闭、按钮宽度配置

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

其他

hy-swipe-action 滑动操作组件

uni-app 滑动操作组件，支持左右滑动显示操作按钮，适用于列表项操作。

<template>
  <hy-swipe-action
    :left-buttons="leftButtons"
    :right-buttons="rightButtons"
    :disabled="isEditMode"
    :button-width="64"
    :close-on-tap="true"
    :close-on-touch-outside="true"
    @click="onButtonClick"
    @open="onOpen"
    @close="onClose"
    @swipe-start="onSwipeStart"
    @swipe-end="onSwipeEnd"
  >
    <!-- 自定义左/右按钮（可选） -->
    <template #left-button="{ button, index }">
      <view style="padding: 0 8px;">{{ button.text }}</view>
    </template>
    <template #right-button="{ button, index }">
      <view style="padding: 0 8px;">{{ button.text }}</view>
    </template>

    <!-- 列表项内容 -->
    <view class="list-item">内容</view>
  </hy-swipe-action>
</template>

<script>
import HySwipeAction from '@/components/hy-swipe-action/hy-swipe-action.vue'

export default {
  components: { HySwipeAction },
  data() {
    return {
      isEditMode: false,
      leftButtons: [
        { text: '置顶', backgroundColor: '#007AFF' }
      ],
      rightButtons: [
        { text: '标记', backgroundColor: '#FF9500' },
        { text: '删除', backgroundColor: '#FF3B30' }
      ]
    }
  },
  methods: {
    onButtonClick({ button, direction, index }) {
      // ...
    },
    onOpen({ direction }) {},
    onClose() {},
    onSwipeStart() {},
    onSwipeEnd() {}
  }
}
</script>

属性（Props）

• leftButtons Array 默认：[] 左侧按钮组
• rightButtons Array 默认：[] 右侧按钮组
• threshold Number 默认：10 开始滑动的判定阈值
• disabled Boolean 默认：false 是否禁用滑动
• leftDisabled Boolean 默认：false 禁止向右滑打开左侧
• rightDisabled Boolean 默认：false 禁止向左滑打开右侧
• autoClose Boolean 默认：true 点击按钮后是否自动关闭
• buttonWidth Number 默认：60 单个按钮宽度（px）
• closeOnTap Boolean 默认：true 点击内容区域是否自动归位
• closeOnTouchOutside Boolean 默认：true 点击内容之外区域是否自动归位

事件（Events）

• click 参数：{ button, direction, index } 按钮点击
• open 参数：{ direction } 打开时触发
• close 无参数 关闭时触发
• swipe-start 无参数 开始滑动时触发
• swipe-end 无参数 结束滑动时触发

插槽（Slots）

• left-button 作用域：{ button, index } 自定义左侧按钮内容
• right-button 作用域：{ button, index } 自定义右侧按钮内容

按钮配置（示例）

按钮为一个对象数组，每个按钮可配置以下属性：

• text String 按钮文本
• backgroundColor String 按钮背景色
• color String 文本颜色，默认 #FFFFFF
• style Object 自定义样式对象，合并到按钮样式

编程式控制

通过 ref 可在父组件中调用 open(direction) 与 close()：

<hy-swipe-action ref="swipe" :left-buttons="leftButtons"/>

this.$refs.swipe.open('left')
this.$refs.swipe.close()