纯JS实现列表侧滑展示更多操作实现删除操作

引言

在现代网页开发中，列表是一种非常常见的元素，它可以用来展示各种各样的数据。为了使列表更加美观和易用，人们经常会使用侧滑操作来显示更多操作，比如删除、编辑等。

实现步骤

1. 创建一个列表

<ul id="list">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

2. 为列表中的每个项目添加一个侧滑按钮

<ul id="list">
  <li>
    <div class="item-content">项目 1</div>
    <div class="item-actions">
      <button class="delete-button">删除</button>
    </div>
  </li>
  <li>
    <div class="item-content">项目 2</div>
    <div class="item-actions">
      <button class="delete-button">删除</button>
    </div>
  </li>
  <li>
    <div class="item-content">项目 3</div>
    <div class="item-actions">
      <button class="delete-button">删除</button>
    </div>
  </li>
</ul>

3. 隐藏侧滑操作按钮

.item-actions {
  display: none;
}

4. 添加事件监听器

const listItems = document.querySelectorAll("#list li");

listItems.forEach((item) => {
  item.addEventListener("touchstart", (event) => {
    item.classList.add("active");
  });

  item.addEventListener("touchend", (event) => {
    item.classList.remove("active");
  });
});

5. 实现删除操作

const deleteButtons = document.querySelectorAll(".delete-button");

deleteButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    const item = button.parentElement.parentElement;
    item.remove();
  });
});

总结

通过以上步骤，我们就可以实现纯JS列表侧滑展示更多操作并实现删除操作的功能。

扩展

读者还可以根据自己的需求，扩展该功能，比如添加更多操作按钮，或者在删除操作时弹出确认对话框等。

常见问题

如何在删除操作时弹出确认对话框？

const deleteButtons = document.querySelectorAll(".delete-button");

deleteButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    if (confirm("确定要删除吗？")) {
      const item = button.parentElement.parentElement;
      item.remove();
    }
  });
});

如何添加更多操作按钮？

<ul id="list">
  <li>
    <div class="item-content">项目 1</div>
    <div class="item-actions">
      <button class="delete-button">删除</button>
      <button class="edit-button">编辑</button>
    </div>
  </li>
  <li>
    <div class="item-content">项目 2</div>
    <div class="item-actions">
      <button class="delete-button">删除</button>
      <button class="edit-button">编辑</button>
    </div>
  </li>
  <li>
    <div class="item-content">项目 3</div>
    <div class="item-actions">
      <button class="delete-button">删除</button>
      <button class="edit-button">编辑</button>
    </div>
  </li>
</ul>

const editButtons = document.querySelectorAll(".edit-button");

editButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    // 这里可以实现编辑操作
  });
});