uniapp uni-swipe-action组件如何使用

在uniapp中使用uni-swipe-action组件时遇到了问题：

  1. 如何正确绑定滑动事件？
  2. 左右滑动按钮的样式怎么自定义？
  3. 点击滑动按钮后如何触发对应操作？
  4. 在nvue环境下使用时有哪些注意事项？
  5. 能否动态控制滑动项的显示与隐藏？
    求完整的示例代码和使用教程。
2 回复

在页面引入uni-swipe-action组件，设置options数组定义左右滑动按钮，绑定@click事件处理点击操作。示例：

<uni-swipe-action>
  <uni-swipe-action-item :options="options" @click="onClick">
    <view>滑动显示操作按钮</view>
  </uni-swipe-action-item>
</uni-swipe-action>

UniApp 的 uni-swipe-action 组件用于实现列表项的滑动操作（如删除、收藏等）。以下是使用方法及示例代码：

基本使用步骤：

  1. 引入组件：在页面或组件的 template 中直接使用。
  2. 配置选项：通过 options 属性定义滑动按钮（左滑/右滑）。
  3. 绑定事件：监听 click 事件处理按钮点击。

示例代码：

<template>
  <view>
    <uni-swipe-action>
      <uni-swipe-action-item 
        :options="options" 
        @click="onSwipeClick"
      >
        <view class="content">滑动我试试</view>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 定义滑动按钮选项
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        },
        {
          text: '收藏',
          style: {
            backgroundColor: '#007aff'
          }
        }
      ]
    }
  },
  methods: {
    // 处理滑动按钮点击事件
    onSwipeClick(e) {
      console.log('点击按钮索引:', e.index)
      if (e.index === 0) {
        uni.showToast({ title: '点击删除', icon: 'none' })
      } else if (e.index === 1) {
        uni.showToast({ title: '点击收藏', icon: 'none' })
      }
    }
  }
}
</script>

<style>
.content {
  padding: 20px;
  background-color: #fff;
}
</style>

关键属性说明：

  • options：数组格式，定义滑动按钮的文本、样式等。
  • auto-close：点击按钮后是否自动关闭滑动菜单（默认为 true）。

注意事项：

  • 需确保已安装 uni-swipe-action 组件（HBuilderX 创建的项目通常自带）。
  • 可通过样式调整按钮宽度、颜色等。

通过以上代码即可实现基本的滑动操作功能。

回到顶部