更新记录

1.0.0（2026-05-27） 下载此版本

Features

• 支持左右双向滑动操作按钮
• renderjs 视图层手势处理（App/H5 零主线程开销）
• 小程序平台 catchtouchmove 兼容方案
• 阈值触发机制，支持自定义灵敏度
• 弹性回弹动画（cubic-bezier 弹簧曲线）
• 按钮组自动管理（同一时间只有一个 SwipeAction 展开）
• provide/inject + 全局事件总线双重管理模式
• 支持程序化控制（open / close 方法）
• 操作按钮自定义样式（渐变背景、图标、文字）
• 与 neo-zlist-pro 完美嵌套联动
• Vue 2.7+ / Vue 3 Composition API 全兼容
• 全平台支持（H5 / App / 各大小程序）

Performance

• App/H5 使用 renderjs 在视图层处理手势，主线程零开销
• requestAnimationFrame 节流 callMethod 频率
• CSS transition GPU 加速动画
• 方向锁定后不再重复计算
• 组件销毁时清理事件监听，防止内存泄漏

平台兼容性

uni-app(3.7.8)

uni-app x(3.7.8)

Neo SwipeAction Pro - 高性能滑动操作单元格

高性能侧滑操作组件，renderjs 视图层手势处理，弹性回弹动画，支持左右双向滑动，与 neo-zlist-pro 完美集成。

特性

• 极致性能：App/H5 使用 renderjs 在视图层处理手势，主线程零开销
• 左右双向滑动：左侧和右侧均可配置独立操作按钮
• 弹性回弹：iOS 风格橡皮筋阻力，超出边界自动衰减
• 阈值触发：可配置触发全开的滑动距离比例
• 按钮组互斥：同一时间只有一个 SwipeAction 展开
• 程序化控制：支持 open() / close() 方法调用
• 完美兼容：Vue 2.7+ / Vue 3 Composition API，全平台支持
• 与 neo-zlist-pro 联动：列表纵向滚动与单元格横向滑动互不干扰

兼容性

安装

在 DCloud 插件市场搜索 neo-swipe-action-pro 导入，或直接复制 uni_modules/neo-swipe-action-pro 到项目的 uni_modules 目录。

快速开始

<template>
  <neo-swipe-action-pro
    :actions="leftActions"
    :rightActions="rightActions"
    :threshold="0.3"
    @action="onAction"
  >
    <view class="item">
      <text>向左或向右滑动试试</text>
    </view>
  </neo-swipe-action-pro>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const leftActions = [
      { text: '置顶', icon: '📌', style: 'background: linear-gradient(135deg, #3b82f6, #2563eb);' }
    ]
    const rightActions = [
      { text: '删除', icon: '🗑', style: 'background: linear-gradient(135deg, #ef4444, #dc2626);' }
    ]

    function onAction(e) {
      console.log(e.direction, e.index, e.name)
    }

    return { leftActions, rightActions, onAction }
  }
})
</script>

与 neo-zlist-pro 联动

<neo-zlist-pro :list="items" height="600rpx">
  <template #default="{ item }">
    <neo-swipe-action-pro
      :rightActions="actions"
      :name="item.id"
      @action="onAction"
    >
      <view class="list-item">{{ item.title }}</view>
    </neo-swipe-action-pro>
  </template>
</neo-zlist-pro>

API

Props

Events

Methods（通过 ref 调用）

使用建议

1. 操作按钮数量建议 1-3 个，过多会影响体验
2. 按钮 style 中设置 min-width 可自定义单个按钮宽度
3. 嵌套在 scroll-view 或 neo-zlist-pro 中使用时，手势方向自动识别
4. 需要全局互斥效果时，确保 SwipeAction 在同一个页面内

许可

MIT