uniappを使用してスライディング削除機能を実装する

ユニアプリを使用してスライディング削除機能を実装する

スライディング削除機能は、最新のモバイル アプリケーションで一般的な操作方法の 1 つであり、ユーザーはスライディング ジェスチャを使用できるようになります。リストまたはページ。不要なコンテンツをすぐに削除します。 uniapp フレームワークでは、スライディング削除機能の実装は非常に簡単で、複数のプラットフォームに適用できます。

まず、uniapp プロジェクトを作成し、削除する必要があるリスト項目をページに表示する必要があります。リスト項目に、スライド削除をトリガーする領域を追加し、対応するイベントを実装できます。

HTML コード例:

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart(index)" @touchmove="touchMove(index)" @touchend="touchEnd(index)">
      <view class="content">{{ item }}</view>
      <view class="delete" @click="deleteItem(index)">删除</view>
    </view>
  </view>
</template>

上記のコードでは、v-for ディレクティブを使用してリスト項目をトラバースし、各リスト項目のスライド削除をトリガーする領域を追加します。スライド削除領域の右側に、「削除」ボタンを追加しました。

次に、対応する vue インスタンスにスライディング削除ロジックを実装する必要があります。

JavaScript コード例:

<script>
export default {
  data() {
    return {
      list: ['列表项1', '列表项2', '列表项3', '列表项4', '列表项5'],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      deleteWidth: 100,
      deletingIndex: -1
    }
  },
  methods: {
    touchStart(index) {
      this.deletingIndex = -1;
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    touchMove(index) {
      this.endX = event.changedTouches[0].pageX;
      this.endY = event.changedTouches[0].pageY;
      let moveX = this.endX - this.startX;
      let moveY = this.endY - this.startY;
      if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0 && Math.abs(moveX) >= this.deleteWidth) {
        this.deletingIndex = index;
      } else if (this.deletingIndex === index && Math.abs(moveX) < Math.abs(moveY)) {
        this.deletingIndex = -1;
      }
    },
    touchEnd(index) {
      if (this.deletingIndex === index) {
        this.deleteItem(index);
      }
      this.deletingIndex = -1;
      this.startX = 0;
      this.startY = 0;
      this.endX = 0;
      this.endY = 0;
    },
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

上記のコードでは、3 つのタッチ イベント関数 touchStart、touchMove、touchEnd をバインドしました。 touchStartイベントでは、スライド開始時の座標情報を記録します。 touchMove イベントでは、スライド距離を計算し、特定の条件に基づいてスライド削除機能が現在アクティブになっているかどうかを判断します。 touchEndイベントでは、スライドの結果に応じて削除操作を行うか、削除をキャンセルします。

最後に、対応するスタイルをページに追加する必要があります。

CSS コード例:

<style>
.item {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding-left: 20px;
  font-size: 28px;
}

.delete {
  width: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  font-size: 28px;
}
</style>

上記のコードを通じて、基本的なスライディング削除関数を実装し、uniapp プロジェクトのリスト項目を削除する例を示しました。実際のプロジェクトでは、ニーズに応じてスタイルとインタラクション効果をさらにカスタマイズして、スライディング削除機能をユーザーの期待にさらに沿わせることができます。

概要:
uniapp フレームワークでは、スライディング削除機能を実装するのは非常に簡単で、対応するイベントとスタイルをページに追加するだけです。 touchStart、touchMove、touchEnd などのタッチ イベント関数を通じて、スライド削除のインタラクティブな効果を簡単に実現し、対応するメソッドで削除操作を実行できます。同時に、CSS スタイルをカスタマイズすることで、スライド削除機能をより美しく実用的にすることができます。

以上がuniappを使用してスライディング削除機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。