html 滑动删除-前端问答-PHP中文网

html 滑动删除

PHPz

发布： 2023-05-15 13:15:07

原创

589人浏览过

随着移动端设备的普及，越来越多的网站和应用开始注重移动端的用户体验。其中，滑动删除成为了一种常见的操作方式。本文将会介绍如何使用 html 和 css 实现滑动删除功能。

HTML 结构设计

首先，需要在 HTML 中设计好需要实现滑动删除功能的列表，例如：

<ul>
  <li>
    <div class="item-content">
      <div class="item-title">列表标题</div>
      <div class="item-delete">
        <button>删除</button>
      </div>
    </div>
  </li>
</ul>

登录后复制

其中，item-content 为列表项的主要内容，item-delete 则是滑动删除时要显示的删除按钮。需要注意的是，item-content 和 item-delete 两个元素需要设置固定宽度，以便在滑动时可以展示全部内容。

CSS 样式设计

接下来，需要使用 CSS 样式对列表项进行设计，包括设置每个列表项的位置、高度、宽度等属性，并且为滑动删除按钮设置样式。可以使用以下代码实现：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  height: 50px;
  line-height: 50px;
  background: #f0f0f0;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #dcdcdc;
}

.item-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 60px 0 15px;
}

.item-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  padding-right: 15px;
  background: #f44336;
  color: #fff;
  text-align: center;
}

.item-delete button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

登录后复制

上述代码对列表项设置了固定高度、边框、背景色等基本样式，并为 item-content 和 item-delete 两个元素设置了绝对定位。其中，item-content 的 padding-right 设为 60px，而 item-delete 的宽度则设为 60px，并将删除按钮右侧留出 15px 的间隙。

立即学习“前端免费学习笔记（深入）”；

JavaScript 实现滑动删除

最后，需要使用 JavaScript 代码实现滑动删除功能。具体来说，需要考虑以下几个方面：

监听 touchstart、touchmove、touchend 事件，并获取利用 event.touches 获得触摸点在屏幕中的坐标，计算触摸点的水平位移。
利用 transform 属性实现滑动效果。
根据滑动的距离，判断是否需要显示删除按钮，并在触摸结束时实现删除功能。

以下是具体实现代码：

var startX, moveX, delWidth = 60;
var list = document.getElementsByTagName('li');

for (var i = 0; i < list.length; i++) {
  list[i]._index = i;

  list[i].addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    moveX = 0;
  });

  list[i].addEventListener('touchmove', function(event) {
    moveX = event.touches[0].clientX - startX;
    if (moveX > 0) {
      this.style.transform = 'translateX(' + moveX + 'px)';
    }
  });

  list[i].addEventListener('touchend', function(event) {
    if (moveX > delWidth / 2) {
      this.style.transform = 'translateX(' + delWidth + 'px)';
      this.querySelector('.item-delete').addEventListener('click', function(event) {
        var index = event.currentTarget.parentNode.parentNode._index;
        console.log('delete item: ' + index);
        // TODO 实现删除操作
      });
    } else {
      this.style.transform = 'translateX(0px)';
    }
  });
}

登录后复制

上述代码中，首先将每个列表项单独监听 touchstart、touchmove、touchend 事件，并根据触摸点与滑动距离计算出平移量，使用 transform 实现滑动效果。

在 touchend 事件中，如果滑动距离超过一定阈值，则将列表项平移到 deleteWidth 的位置，并为删除按钮添加点击事件，实现删除操作。

至此，滑动删除功能的实现就完成了。你可以通过以上方法，轻松地在 HTML 和 CSS 中实现滑动删除的效果，优化移动端应用和网站的用户体验，提高用户的满意度。

以上就是html 滑动删除的详细内容，更多请关注php中文网其它相关文章！