uniappを使って長押しポップアップ削除操作を実装する方法

最近のアプリでは、要素を長押しして操作をポップアップすることが非常に一般的な操作方法になっています。今回はuniappを使った開発において長押しポップアップ削除を実装する方法についてお話します。

1. HTML での要素の定義

まず、HTML で操作する必要がある要素を定義する必要があります。この例では、v-for を使用してリストを生成し、各リスト項目に削除ボタンなどの必要なアクションを含める必要があります。 HTML コードは次のとおりです。

<template>
  <div class="list">
    <div class="item" v-for="(item, index) in list" :key="index">
      <div>{{ item.name }}</div>
      <button class="delete" @click="deleteItem(index)">删除</button>
    </div>
  </div>
</template>

ここで、list は表示する必要があるデータを表す配列、item は配列内の各項目への参照です。 , Index は、配列内の現在の項目のインデックスです。各リスト項目には、名前を表示する div 要素と項目を削除するボタンが含まれている必要があります。

2. イベントを要素にバインドする

次に、定義した要素にイベントをバインドする必要があります。ユーザーが要素を長押しするとトリガーされる @longpress イベントをバインドする必要があります。同時に、ポップアップ削除操作で使用できるように、ユーザーが長押しした項目のインデックスを記録する必要もあります。 HTML コードは次のとおりです。

<template>
  <div class="list">
    <div class="item"
         v-for="(item, index) in list"
         :key="index"
         @longpress.native="showMenu(index)">
      <div>{{ item.name }}</div>
      <button class="delete" @click="deleteItem(index)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{ name: "item 1" }, { name: "item 2" }, { name: "item 3" }], // 列表数据
      longPressIndex: null // 长按的项的下标
    };
  },
  methods: {
    showMenu(index) {
      this.longPressIndex = index;
      // TODO: 显示删除操作的菜单
    },
    deleteItem(index) {
      // TODO: 删除列表项
    }
  }
};
</script>

上に示すように、現在長押しされている項目のインデックスを showMenu メソッドに記録し、それをポップ内で使用できます。アップ削除操作。

3. 削除操作メニューのポップアップ

次に達成する必要があるのは、ハイライトです。削除操作メニューをポップアップします。これを実現するには、uniapp が提供する uni.showActionSheet API を使用します。 showMenu メソッドでこれを呼び出して、メニューをポップアップ表示できます。コードは次のとおりです。

<script>
export default {
  data() {
    return {
      list: [{ name: "item 1" }, { name: "item 2" }, { name: "item 3" }], // 列表数据
      longPressIndex: null // 长按的项的下标
    };
  },
  methods: {
    showMenu(index) {
      this.longPressIndex = index;
      uni.showActionSheet({
        itemList: ["删除"],
        success: res => {
          if (res.tapIndex === 0) {
            this.deleteItem(this.longPressIndex);
          }
        }
      });
    },
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
};
</script>

これで、長押しポップアップ削除操作の機能を実装することができました。リスト項目を長押しするとメニューが表示され、「削除」を選択するとリストから項目が削除されます。

まとめ

上記の方法により、uniappで長押しポップアップ削除操作を簡単に実装することができます。ただし、長押し操作はプラットフォームによって異なる場合があるため、プラットフォームごとに対応する必要があることに注意してください。特にミニプログラムで長押し操作を実装する場合、uniappが提供するAPIではなく、ミニプログラムのAPIを呼び出す必要があります。同時に、uniapp のバージョンが異なると使用される API も異なる可能性があることに注意する必要があります。

以上がuniappを使って長押しポップアップ削除操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。