【经典传承】微信列表左滑展示按钮：简单实用必收藏

2023-12-02 20:17:23

微信列表左滑按钮：交互式指南

简介

在移动端应用程序中，提供流畅且直观的交互至关重要。微信列表左滑显示按钮便是实现这一目标的一种常见且有效的交互方式。通过本文，我们将逐步指导您如何使用CSS和JavaScript实现这一交互效果，提升您的移动端应用程序的用户体验。

HTML结构

首先，我们需要创建一个基本的HTML结构来表示我们的列表。我们将使用<ul>元素来创建列表，并在其内包含多个<li>元素，每个<li>元素代表一个列表项。在每个列表项中，我们将创建一个包含列表项内容的<div>元素和一个包含按钮的<div>元素。

CSS样式

接下来，让我们使用CSS来设置样式，让我们的列表和按钮具有所需的视觉效果。我们将使用<ul>和<li>选择器来设置列表和列表项的样式，并使用<div>选择器来设置列表项内容和按钮的样式。

JavaScript脚本

现在，我们进入最关键的部分，即使用JavaScript实现左滑显示按钮的交互效果。我们将使用touchstart、touchmove和touchend事件监听器来跟踪用户的触摸事件。当用户在列表项上开始触摸时，我们将显示按钮；当用户触摸移动时，我们将更新按钮的位置；当用户结束触摸时，我们将隐藏按钮。

代码示例

<ul id="list">
  <li>
    <div class="item-content">列表项内容1</div>
    <div class="item-buttons">
      <button>删除</button>
      <button>编辑</button>
    </div>
  </li>
  <!-- 其他列表项 -->
</ul>

#list {
  list-style-type: none;
  padding: 0;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.item-content {
  flex: 1;
}

.item-buttons {
  display: flex;
  gap: 10px;
}

.item-button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
}

.item-buttons-active {
  transform: translateX(0);
}

const list = document.getElementById('list');

list.addEventListener('touchstart', (event) => {
  // 获取列表项
  const item = event.target.closest('.item');
  if (!item) {
    return;
  }

  // 获取按钮元素
  const itemButtons = item.querySelector('.item-buttons');

  // 显示按钮
  itemButtons.classList.add('item-buttons-active');

  // 防止默认行为（如页面滚动）
  event.preventDefault();
});

list.addEventListener('touchmove', (event) => {
  // 获取列表项
  const item = event.target.closest('.item');
  if (!item) {
    return;
  }

  // 获取按钮元素
  const itemButtons = item.querySelector('.item-buttons');

  // 获取触摸位置
  const touchX = event.touches[0].clientX;

  // 获取列表项宽度
  const itemWidth = item.offsetWidth;

  // 获取按钮宽度
  const itemButtonsWidth = itemButtons.offsetWidth;

  // 计算按钮的translateX值
  const translateX = Math.max(touchX - itemWidth, -itemButtonsWidth);

  // 更新按钮位置
  itemButtons.style.transform = `translateX(${translateX}px)`;
});

list.addEventListener('touchend', (event) => {
  // 获取列表项
  const item = event.target.closest('.item');
  if (!item) {
    return;
  }

  // 获取按钮元素
  const itemButtons = item.querySelector('.item-buttons');

  // 隐藏按钮
  itemButtons.classList.remove('item-buttons-active');
});