削除するHTMLスライド

モバイル デバイスの普及に伴い、モバイル ユーザー エクスペリエンスに重点を置く Web サイトやアプリケーションがますます増えています。中でもスライドして削除するのが一般的な操作方法となっています。この記事では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 はスライド削除時に表示される削除ボタンです。スライド時にコンテンツ全体が表示されるように、2 つの要素 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 と 2 つの要素の絶対位置を設定します。アイテムの削除。このうち、item-contentのpadding-rightを60px、item-deleteのwidthを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 イベントについて個別に監視され、それに基づいて計算されます。タッチポイントとスライド距離、移動量、トランスフォームを使用してスライド効果を実現します。

touchendイベントでは、スライド距離が一定の閾値を超えた場合、リスト項目をdeleteWidth位置に移動し、削除ボタンにclickイベントを追加して削除操作を実装します。

これでスライディング削除機能の実装は完了です。上記の方法を使用すると、HTML および CSS でスライド削除効果を簡単に実装し、モバイル アプリケーションや Web サイトのユーザー エクスペリエンスを最適化し、ユーザー満足度を向上させることができます。

以上が削除するHTMLスライドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。