Uniapp滑动操作

Uniapp提供了uni-swipe-action组件来实现滑动操作，可以用于列表项的删除、标记为已读等功能。

使用uni-swipe-action组件需要注意以下几点：

1. uni-swipe-action必须包含在uni-list组件内，用于循环出列表项。

2. uni-swipe-action必须设置right-width属性，表示右侧滑动区域的宽度。

3. uni-swipe-action可以设置auto-close属性，表示滑动一个项时，其他项会自动关闭。

下面是一个使用uni-swipe-action组件的示例：

<template>
  <view>
    <uni-list>
      <uni-swipe-action right-width="150" auto-close>
        <view slot="right" class="uni-padding-right uni-text-right" @click="deleteItem(item)">删除</view>
        <view class="uni-list-item__content">
          <view class="uni-list-item__title">{{item.title}}</view>
          <view class="uni-list-item__desc">{{item.desc}}</view>
        </view>
      </uni-swipe-action>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '标题1', desc: '描述1' },
        { title: '标题2', desc: '描述2' },
        { title: '标题3', desc: '描述3' }
      ]
    };
  },
  methods: {
    deleteItem(item) {
      // 在这里编写删除数据的逻辑
    }
  }
};
</script>

在上述代码中，我们使用uni-swipe-action组件循环出了一个列表项，并设置了滑动区域的宽度为150px，点击“删除”按钮时会调用deleteItem方法，可以在该方法中编写删除数据的逻辑。