html 滑動刪除

隨著行動端裝置的普及，越來越多的網站和應用程式開始注重行動端的使用者體驗。其中，滑動刪除成為了常見的操作方式。本文將會介紹如何使用 HTML 和 CSS 實作滑動刪除功能。

1. 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 兩個元素需要設定固定寬度，以便在滑動時可以顯示全部內容。

2. 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 的間隙。

3. 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中文網其他相關文章！