Bagaimana untuk menutup tetingkap pop timbul dalam uniapp

Uniapp ialah rangka kerja pembangunan silang hujung yang popular, yang membolehkan pembangun menggunakan set kod untuk membina aplikasi yang boleh dijalankan pada berbilang platform berbeza pada masa yang sama. Walau bagaimanapun, sebagai pemula atau pembangun yang menghadapi masalah semasa penggunaan, anda mungkin menghadapi masalah bahawa tetingkap timbul (Timbul) dalam uniapp tidak boleh ditutup seperti biasa. Artikel ini akan memperkenalkan cara menutup tetingkap timbul dalam uniapp.

Pertama sekali, adalah sangat penting untuk memahami penggunaan asas tetingkap timbul dalam uniapp. Biasanya apabila kita menggunakan tetingkap pop timbul, kita perlu memperkenalkan perpustakaan komponen yang perlu kita gunakan dalam halaman, seperti komponen vant yang disediakan secara rasmi, perpustakaan komponen ini sangat kaya dan mudah digunakan, dan ia mengandungi pelbagai pop-. komponen tetingkap atas. Selepas memperkenalkan perpustakaan komponen ke dalam halaman, kita boleh menggunakan komponen pop timbul untuk pembangunan. Sebagai contoh, berikut ialah halaman uniapp ringkas, yang menunjukkan cara menggunakan komponen pop timbul asas:

<template>
  <view class="content">
    <button type="primary" @click="show = true">显示弹窗</button>
    <van-popup v-model="show" position="bottom"></van-popup>
  </view>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

Dalam contoh di atas, kami menggunakan perpustakaan komponen vant yang disediakan oleh komponen Pop Timbul rasmi, perkenalkan komponen ini ke dalam halaman, dan gunakan arahan v-model untuk mengawal paparan dan penyembunyian tetingkap timbul. Klik butang "Tunjukkan Tetingkap Pop Timbul" untuk mengawal paparan tetingkap timbul Pada masa ini, tetingkap timbul yang muncul dari bawah akan dipaparkan pada halaman.

Tetapi kadangkala, selepas menulis kod tetingkap timbul, kami dapati tetingkap timbul tidak boleh ditutup Sebabnya biasanya kekurangan pengendali acara untuk menutup tetingkap timbul. Dalam uniapp, biasanya terdapat dua cara untuk menutup tetingkap timbul: penutupan butang dan penutupan automatik.

Apabila menggunakan butang untuk menutup, kita perlu menambah butang "Tutup" pada tetingkap pop timbul, mengikat acara klik pada butang dan mencetuskan pembolehubah v-model kepada true melalui ini acara, supaya Tetingkap pop timbul ditutup. Mengambil komponen Pop Timbul dalam perpustakaan komponen vant sebagai contoh, kodnya adalah seperti berikut:

<template>
  <view class="content">
    <button type="primary" @click="show = true">显示弹窗</button>
    <van-popup v-model="show" position="bottom">
      <view>
        <button type="default" @click="show = false">关闭</button>
      </view>
    </van-popup>
  </view>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

Dalam kod di atas, kami menambah butang "Tutup" pada tetingkap timbul dan mengikatnya ke peristiwa A klik, yang akan mencetuskan pembolehubah show menjadi false, dengan itu menutup tetingkap timbul.

Selain menutup butang, kami juga boleh menutup tetingkap pop timbul dengan menutupnya secara automatik. Dalam uniapp, kita boleh menetapkan masa untuk tetingkap pop timbul dipaparkan, selepas itu tetingkap timbul akan ditutup secara automatik. Mengambil komponen Pop Timbul dalam pustaka komponen vant sebagai contoh, kodnya adalah seperti berikut:

<template>
  <view class="content">
    <button type="primary" @click="show = true">显示弹窗</button>
    <van-popup v-model="show" position="bottom" :duration="2000"></van-popup>
  </view>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

Dalam kod di atas, kami menetapkan masa untuk tetingkap timbul secara automatik menghampiri 2000 milisaat, atau 2 saat, melalui atribut :duration Tetingkap pop timbul akan ditutup secara automatik. Sudah tentu, apabila menggunakan penutupan automatik, jika pengguna perlu menutup tetingkap pop timbul terlebih dahulu, mereka masih boleh menggunakan butang untuk memaksanya ditutup.

Di atas ialah cara menutup tetingkap timbul dalam uniapp. Secara umum, kaedah menutup tetingkap pop timbul terutamanya termasuk penutupan butang dan penutupan automatik Semasa menulis kod tetingkap timbul, anda perlu memberi perhatian untuk menambah fungsi pemprosesan acara yang sepadan. Berikut ialah kaedah untuk membangunkan tetingkap timbul menggunakan perpustakaan komponen vant yang disediakan secara rasmi Sudah tentu, jika anda menggunakan perpustakaan komponen pihak ketiga atau tersuai yang lain, anda juga boleh membangunkan mengikut dokumen yang sepadan. Saya percaya bahawa melalui pengenalan artikel ini, semua orang telah menguasai kaedah menutup tetingkap timbul dalam uniapp. Saya harap ia dapat membantu semua pembangun.

Atas ialah kandungan terperinci Bagaimana untuk menutup tetingkap pop timbul dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!