uniapp を左にスワイプすると削除ボタンが表示されます

スマートフォンの普及とモバイルインターネットの発展に伴い、さまざまなアプリケーションの使用を含むさまざまな操作に携帯電話を使用する人が増えています。アプリケーションでは通常、アドレス帳、メッセージ リスト、注文リストなどのリスト データに遭遇します。これらのリストでは、詳細の表示、既読としてマーク、削除など、データに対する操作が必要になることがよくあります。このうち、削除操作は比較的一般的な操作ですが、この記事では、UniApp で左スワイプして削除ボタンを表示する効果を実現する方法に焦点を当てます。

UniApp は、同じコードに基づいて複数の実行プラットフォーム (iOS、Android、H5、ミニ プログラム、クイック アプリケーションなど) 用のアプリケーションを同時に生成できるクロスプラットフォーム開発フレームワークです。これにより、開発者はプラットフォームごとに個別のコードを記述する必要がなくなり、開発効率が大幅に向上し、開発コストが削減されます。この記事のサンプル コードは、UniApp 開発フレームワークの Vue.js 部分をベースとして使用します。

1. 実装のアイデア

左にスライドして削除ボタンを表示する効果を実現するには、一般的なアプローチは、リスト項目にスライド可能な領域を追加することです。左側には削除ボタンが表示されます。複数のプラットフォームを同時にサポートするには、モバイル デバイスのタッチ操作と PC のマウス操作を考慮する必要があります。これに基づいて、次のロジックを実装する必要があります。

1. スライド操作: ユーザーの操作を監視し、ユーザーがターゲット領域内でスライド操作を実行したかどうかを判断します。
2. 操作領域: リスト項目にスライド領域を追加する必要があります。
3. 削除ボタンを表示: ユーザーがターゲット領域を左にスライドすると、削除ボタンが表示されます。
4. 削除ボタンを非表示にする: ユーザーがターゲット領域で右にスライドすると、削除ボタンが非表示になります。
5. 削除ボタンをクリックします: ユーザーが削除ボタンをクリックすると、削除操作がトリガーされます。

2. 実装プロセス

1. リスト ページとリスト アイテム コンポーネントの作成

まず、リスト ページとリスト アイテム コンポーネントを作成する必要があります。 list item コンポーネント。ここでは、いくつかの基本的なスタイルとレイアウトを実装するための基礎として、uni-ui フレームワークの list コンポーネントと list-item コンポーネントを使用します。具体的なコードは次のとおりです。

<!-- list.vue -->
<template>
  <view>
    <list>
      <list-item
        v-for="(item, index) in list"
        :key="index"
        :data-index="index"
        :class="item.active ? 'item-active' : ''"
      >
        <view
          class="item-content"
          @touchstart="onTouchStart(index, $event)"
          @touchmove="onTouchMove(index, $event)"
          @touchend="onTouchEnd(index, $event)"
          @mousedown="onMouseDown(index, $event)"
          @mousemove="onMouseMove(index, $event)"
          @mouseup="onMouseUp(index, $event)"
        >
          <view class="item-title">{{item.title}}</view>
          <view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
        </view>
      </list-item>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1', active: false },
        { title: '列表项2', active: false },
        { title: '列表项3', active: false },
        { title: '列表项4', active: false },
        { title: '列表项5', active: false },
      ],
      // 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
      currentIndex: -1,
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
    };
  },
  methods: {
    onTouchStart(index, event) {
      this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchMove(index, event) {
      this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchEnd(index, event) {
      this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onMouseDown(index, event) {
      this.handleTouchStart(index, event.pageX, event.pageY);
    },
    onMouseMove(index, event) {
      this.handleTouchMove(index, event.pageX, event.pageY);
    },
    onMouseUp(index, event) {
      this.handleTouchEnd(index, event.pageX, event.pageY);
    },
    handleTouchStart(index, x, y) {
      if (this.currentIndex !== -1) {
        return;
      }
      this.currentIndex = index;
      this.startX = x;
      this.startY = y;
    },
    handleTouchMove(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    handleTouchEnd(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.currentIndex = -1;
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    onDeleteItem(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style lang="scss">
.item-active .item-content {
  transform: translateX(-60px);
}

.item-content {
  position: relative;
  height: 60px;
  padding: 0 20px;
  line-height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow: hidden;

  .item-delete {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 20px;
    line-height: 60px;
    background-color: #f00;
    color: #fff;
    font-size: 18px;
  }
}
</style>

ここでは、リスト項目コンポーネントの項目コンテンツにスライディング イベント リスナーと削除ボタンを追加し、アクティブなコンポーネントを追加することで削除ボタンの表示と非表示を制御します。フィールドをデータに追加します。このスタイルでは、transform 属性を使用して左スライド効果を実現し、overflow:hidden 属性を使用して削除ボタンを非表示にします。

2. スライディング イベントをリッスンする

スライディング操作を実装するには、タッチ イベントを監視する必要があります。コードでは、シングル タッチ (タッチ イベント) とマウス イベント (mousedown、mousemove、 Mouseup イベント) を使用して、ユーザーのスライド操作を監視します。特定の実装の詳細については、上記のコードを参照してください。

3. 削除ボタンの表示と非表示を制御する

ユーザーがターゲット領域で左にスライドしたときは、削除ボタンを表示する必要があります。ユーザーが右にスライドしたときは、削除ボタンを表示する必要があります。ターゲット領域では、削除ボタンを非表示にする必要があります。ここでは、アクティブなフィールドを追加することで削除ボタンのコントロールを実装します。ユーザーが左にスワイプすると、アクティブなフィールドが true に設定され、それ以外の場合は false に設定されます。

4. 削除ボタンをクリックして削除操作をトリガーします

ユーザーが削除ボタンをクリックしたら、削除操作をトリガーする必要があります。ここでは、Vue.js コンポーネント インスタンスの splice メソッドを使用して、データから現在の項目を削除します。具体的な実装については、サンプル コードの onDeleteItem メソッドを参照してください。

3. 概要

これまでのところ、UniApp で削除ボタンとして表示される左スワイプの効果が完成しました。スライドイベントを実装し、削除ボタンの表示/非表示を制御し、削除ボタンをクリックして削除操作をトリガーすることで、リストデータに削除操作を簡単に追加できます。

実際の開発では、操作を削除する前に確認する、複数選択の削除をサポートするなど、さらに多くの要件を満たす必要がある場合があることに注意してください。これに基づいて、実際のニーズに基づいてさらに拡張や最適化を行い、アプリケーションのユーザー エクスペリエンスを向上させることができます。

以上がuniapp を左にスワイプすると削除ボタンが表示されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。