怎样实现列表组件侧滑删除

实现列表组件的侧滑删除（Swipe to Delete），核心思路是：在列表每一项中放一个“内容层”和一个“操作层（删除按钮）”，通过手势或鼠标拖拽让内容层向左滑动，露出删除按钮，点击后删除该项。

下面分 Web（前端） 和 移动端（Flutter / React Native） 常见实现方式说明。

一、Web 前端实现（HTML + CSS + JS）

1. 结构

<ul class="list">
  <li class="item">
    <div class="content">列表项内容</div>
    <button class="delete">删除</button>
  </li>
</ul>

2. CSS

.item {
  position: relative;
  overflow: hidden;
  height: 50px;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: transform 0.3s;
}

.delete {
  position: absolute;
  right: 0;
  width: 80px;
  height: 100%;
  background: red;
  color: #fff;
  border: none;
}

3. JS（手势滑动）

let startX = 0;
let currentX = 0;

document.querySelectorAll('.item').forEach(item => {
  const content = item.querySelector('.content');

  item.addEventListener('touchstart', e => {
    startX = e.touches[0].clientX;
  });

  item.addEventListener('touchmove', e => {
    currentX = e.touches[0].clientX - startX;
    if (currentX < 0) {
      content.style.transform = `translateX(${currentX}px)`;
    }
  });

  item.addEventListener('touchend', () => {
    if (currentX < -40) {
      content.style.transform = 'translateX(-80px)';
    } else {
      content.style.transform = 'translateX(0)';
    }
  });

  item.querySelector('.delete').onclick = () => {
    item.remove();
  };
});

二、Vue / React 实现思路

Vue

• 使用 v-for 渲染列表
• 用 @touchstart、@touchmove 控制 style.transform
• 删除时 list.splice(index, 1)

React

• 用 state 保存 offset
• onTouchMove 更新 offset
• 删除时 setList(list.filter(...))

三、Flutter 实现（推荐）

Flutter 自带 Dismissible：

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key(items[index]),
      onDismissed: (direction) {
        setState(() {
          items.removeAt(index);
        });
      },
      background: Container(color: Colors.red),
      child: ListTile(title: Text(items[index])),
    );
  },
);

四、React Native 实现

使用 react-native-swipe-list-view：

<SwipeListView
  data={data}
  renderItem={rowData => <Text>{rowData.item.title}</Text>}
  renderHiddenItem={rowData => (
    <TouchableOpacity onPress={() => deleteItem(rowData.item.id)}>
      <Text>删除</Text>
    </TouchableOpacity>
  )}
  leftOpenValue={0}
  rightOpenValue={-75}
/>

五、关键注意点

• 限制最大滑动距离
• 滑动其他项时关闭已打开项
• 动画使用 transform 提升性能
• 移动端优先用原生方案（Flutter / RN）

如果你说明具体技术栈（Vue / React / 小程序 / Flutter），我可以给你完整可直接用的代码。