uniappのポップアップウィンドウを閉じる方法

Uniapp は人気のあるクロスエンド開発フレームワークで、開発者は一連のコードを使用して、複数の異なるプラットフォームで同時に実行できるアプリケーションを構築できます。ただし、初心者や開発者が使用中に問題に遭遇すると、uniapp のポップアップ ウィンドウ (Popup) が正常に閉じることができないという問題に遭遇する可能性があります。この記事では、uniappのポップアップウィンドウを閉じる方法を紹介します。

まず第一に、uniapp のポップアップ ウィンドウの基本的な使用法を理解することが非常に重要です。通常、ポップアップ ウィンドウを使用する場合、最初にページ内で使用するコンポーネント ライブラリ (公式に提供されている Vant コンポーネントなど) を導入する必要があります。このコンポーネント ライブラリは非常に豊富で使いやすく、さまざまなポップアップ ウィンドウが含まれています。ウィンドウコンポーネントをアップします。コンポーネント ライブラリをページに導入した後、開発にポップアップ コンポーネントを使用できるようになります。たとえば、以下は基本的なポップアップ コンポーネントの使用方法を示す単純な uniapp ページです:

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

上の例では、公式に提供されている vant コンポーネント ライブラリの Popup コンポーネントを使用しています。これを導入します。コンポーネントをページに追加し、v-model ディレクティブを使用してポップアップ ウィンドウの表示と非表示を制御します。 「ポップアップウィンドウを表示」ボタンをクリックすると、ポップアップウィンドウの表示が制御され、ページ上に下から飛び出すポップアップウィンドウが表示されます。

しかし、ポップアップ ウィンドウのコードを作成した後、ポップアップ ウィンドウを閉じることができないことが判明することがあります。通常、その理由は、ポップアップ ウィンドウを閉じるためのイベント ハンドラーが欠落しているためです。 uniapp では、通常、ポップアップ ウィンドウを閉じるには、ボタンで閉じる方法と自動的に閉じる 2 つの方法があります。

ボタンを使用して閉じる場合は、ポップアップ ウィンドウに「閉じる」ボタンを追加し、クリック イベントをボタンにバインドし、v-model を # としてトリガーする必要があります。 # このイベント #true 変数を使用して、ポップアップ ウィンドウを閉じます。 vant コンポーネント ライブラリの Popup コンポーネントを例にとると、コードは次のとおりです。

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

上記のコードでは、ポップアップ ウィンドウに「閉じる」ボタンを追加し、クリックをポップアップ ウィンドウにバインドしました。ボタン イベントの場合、このイベントにより変数

show が false になり、ポップアップ ウィンドウが閉じます。

ボタンを閉じるだけでなく、ポップアップ ウィンドウを自動的に閉じて閉じることもできます。 uniapp では、ポップアップ ウィンドウが表示されるまでの時間を設定できます。その後、ポップアップ ウィンドウは自動的に閉じます。 vant コンポーネント ライブラリの Popup コンポーネントを例にとると、コードは次のとおりです。

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

上記のコードでは、# によってポップアップ ウィンドウが自動的に閉じる時間を 2000 ミリ秒近くに設定しています。 ##:duration

属性。つまり、ポップアップ ウィンドウは 2 秒後に自動的に閉じます。もちろん、自動終了を使用している場合でも、ユーザーが事前にポップアップ ウィンドウを閉じる必要がある場合は、ボタンを使用して強制的に閉じることができます。 上記はuniappのポップアップウィンドウを閉じる方法です。一般的にポップアップウィンドウを閉じる方法にはボタンで閉じる方法と自動で閉じる方法があり、ポップアップウィンドウのコードを記述する際には対応するイベント処理関数の追加に注意する必要があります。ここでは公式に提供されているvantコンポーネントライブラリを使用してポップアップウィンドウを開発する方法を紹介しますが、もちろん他のサードパーティやカスタムコンポーネントライブラリを使用している場合でも、対応するドキュメントに従って開発することも可能です。この記事の導入により、皆さんは uniapp でポップアップ ウィンドウを閉じる方法を習得したと思います。開発者の皆様のお役に立てれば幸いです。

以上がuniappのポップアップウィンドウを閉じる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。