Cara menggunakan uniapp untuk melaksanakan operasi pemadaman pop timbul tekan lama

Untuk lebih banyak apl pada masa kini, menekan lama elemen untuk memaparkan operasi telah menjadi kaedah operasi yang sangat biasa. Hari ini, kita akan bercakap tentang cara melaksanakan pemadaman pop timbul tekan lama dalam pembangunan menggunakan uniapp.

1. Mentakrifkan elemen dalam HTML

Pertama, kita perlu mentakrifkan elemen yang perlu dikendalikan dalam HTML. Dalam contoh ini, kita boleh menggunakan v-for untuk menjana senarai, dan kemudian setiap item senarai harus mengandungi tindakan yang kita perlukan, seperti butang padam. Kod HTML adalah seperti berikut:

<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>

di mana list ialah tatasusunan, mewakili data yang perlu kami paparkan, item ialah rujukan kepada setiap item dalam tatasusunan, index ialah item semasa dalam subskrip tatasusunan. Setiap item senarai perlu mengandungi elemen div yang memaparkan nama dan butang untuk memadam item.

2. Ikat peristiwa kepada elemen

Seterusnya, kita perlu mengikat peristiwa pada elemen yang baru kita takrifkan. Kita perlu mengikat acara @longpress, yang akan dicetuskan apabila pengguna menekan lama elemen tersebut. Pada masa yang sama, kami juga perlu merekodkan indeks item yang ditekan lama oleh pengguna, supaya kami boleh menggunakannya dalam operasi memadam pop timbul. Kod HTML adalah seperti berikut:

<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>

Seperti yang ditunjukkan di atas, kami merekodkan indeks item yang sedang ditekan lama dalam kaedah showMenu, dan kemudian kami boleh menggunakannya dalam pop -operasi pemadaman naik.

3. Timbulkan menu operasi padam

Perkara seterusnya yang perlu kita capai ialah sorotan: timbulkan menu operasi padam. Kita boleh menggunakan API uni.showActionSheet yang disediakan oleh uniapp untuk mencapai ini. Kita boleh memanggilnya dalam kaedah showMenu untuk muncul menu. Kodnya adalah seperti berikut:

<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>

Kini, kami telah berjaya melaksanakan fungsi tekan lama untuk muncul operasi pemadaman. Apabila pengguna menekan lama item senarai, menu akan muncul Selepas pengguna memilih padam, item tersebut dipadamkan daripada senarai.

Ringkasan

Melalui kaedah di atas, kami boleh dengan mudah melaksanakan operasi pemadaman tekan lama timbul dalam uniapp. Walau bagaimanapun, perlu diingatkan bahawa operasi akhbar lama mungkin berbeza pada platform yang berbeza, jadi ia perlu dikendalikan untuk platform yang berbeza. Terutama dalam program mini, apabila melaksanakan operasi tekan lama, anda perlu memanggil API program mini dan bukannya API yang disediakan oleh uniapp. Pada masa yang sama, anda juga perlu ambil perhatian bahawa API yang digunakan oleh versi uniapp yang berbeza mungkin juga berbeza.

Atas ialah kandungan terperinci Cara menggunakan uniapp untuk melaksanakan operasi pemadaman pop timbul tekan lama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!