uniappポップアップボックスの実装方法

モバイル インターネットの人気に伴い、オンライン活動にスマートフォンやタブレットを使用する人がますます増えています。これに伴い、モバイルアプリやWebデザインの需要も高まっています。 UniApp は、この問題を解決するクロスプラットフォーム開発フレームワークであり、iOS、Android、H5 などのプラットフォームを含むがこれらに限定されない、複数の端末上で一連のコードと実行効果を実現できるクロスプラットフォーム開発ソリューションを提供します。 。

この記事では主に UniApp フレームワークのポップアップ ボックスについて説明します。

UniApp フレームワークでは、ポップアップ ボックスはよく使用されるコンポーネントの 1 つであり、クライアント上でポップアップ ウィンドウの形式でユーザーに操作の確認や取得などのプロンプトを表示するのに役立ちます。ユーザーのログイン情報やその他の情報などしたがって、UniApp ポップアップ ボックスをどのように実装するかは、習得しなければならないスキルの 1 つです。

1. UniApp ポップアップ ボックスの使用

UniApp フレームワークは、さまざまなニーズを満たすために 2 つの異なるタイプのポップアップ ボックスを提供します。基本的な使用法の 1 つを見てみましょう:

• alert() を使用して単純なテキスト情報を表示する

UniApp フレームワークでは、alert() を使用できます。単純なテキストを表示するメソッド 情報はポップアップ ウィンドウの形式でユーザーに表示されます。

uni.alert({
  title: '提示信息',
  content: '这是一条简单的弹出提示',
  success: function () {
     console.log('弹出框已关闭')
  }
});

このうち、title はポップアップ ボックスのタイトル、content はポップアップ ボックスのメイン コンテンツです。ポップアップボックス、成功はポップアップボックスを閉じた後のコールバック関数、もちろんキャンセルはcancelでも可能です、ボタンのコールバック関数の機能です。

• ユーザー選択を取得するには、confirm() を使用します。

UniApp フレームワークでは、confirm() メソッドを使用して、選択プロンプト ボックスをポップアップ表示することもできます。 :

uni.confirm({
  title: '选择操作',
  content: '你确定要进行某个操作吗？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确认操作');
    } else if (res.cancel) {
      console.log('用户取消操作');
    }
  }
});

上記のコードでは、confirm() メソッドは、ユーザーに選択を促す選択プロンプト ボックスをポップアップ表示します。ユーザーが選択を完了すると、コールバックを通じてユーザーの選択内容を取得します。機能を選択し、選択結果に応答する操作を行います。このうち、res.confirmはユーザが操作を確認することを示し、res.cancelはユーザが操作をキャンセルすることを示します。

2. カスタマイズされた UniApp ポップアップ ボックスの実装

フレームワークによって提供される組み込みメソッドの使用に加えて、ポップアップ ボックスをカスタマイズして、より柔軟な操作を実現することもできます。効果。次に、カスタム UniApp ポップアップ ボックスを実装する方法を見てみましょう。

1. HTML レイアウト

まず、ポップアップ ボックスの HTML レイアウトを準備する必要があります。例:

<template>
  <view class="modal">
    <view class="modal-content">
      <view class="modal-header">
        <h2>弹出框标题</h2>
        <i class="fa fa-times" @click="closeModal"></i>
      </view>
      <view class="modal-body">
        <p>这里是弹出框的主体内容</p>
      </view>
      <view class="modal-footer">
        <button type="button" @click="submit">确定</button>
        <button type="button" @click="closeModal">取消</button>
      </view>
    </view>
  </view>
</template>

上記のレイアウトでは、では、View コンポーネントを使用して、さまざまなクラス属性を通じてさまざまなスタイル効果を実現し、同時に @click などの Vue 命令を使用してクリック イベントをバインドします。

2. CSS スタイル

次に、ポップアップ ボックス スタイルをさらに処理して、より美しく合理的なものにする必要があります。例:

.modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .modal-content {
  width: 400rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal .modal-content .modal-header {
  background-color: #337ab7;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
}

.modal .modal-content .modal-header h2 {
  margin: 0;
}

.modal .modal-content .modal-header i {
  font-size: 20rpx;
  cursor: pointer;
}

.modal .modal-content .modal-body {
  padding: 20rpx;
}

.modal .modal-content .modal-footer {
  background-color: #eeeeee;
  padding: 10rpx;
  display: flex;
  justify-content: flex-end;
}

.modal .modal-content .modal-footer button {
  border: none;
  padding: 10rpx 20rpx;
  margin-left: 10rpx;
  border-radius: 5rpx;
  cursor: pointer;
}

.modal .modal-content .modal-footer button:first-child {
  background-color: #337ab7;
  color: #ffffff;
}

.modal .modal-content .modal-footer button:last-child {
  background-color: #dddddd;
  color: #333333;
}

上記の CSS スタイルでは、いくつかの CSS テクニックを使用して、:after や :before などの疑似クラス識別子を通じて複数のボタン グループのスタイル効果を実現しました。同時に、@keyframes などのルールを使用して定義しましたアニメーション、エフェクト。

3. JS コード

最後に、ポップアップ ボックスの特定の機能を実装するための JS コードを記述する必要があります。例:

export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
    },
    submit() {
      console.log('执行提交操作');
      this.closeModal();
    }
  }
}

上記のコードでは、data() メソッドを使用して、visible という名前のデータ属性を定義します。この属性は、ポップアップ ボックスの表示と終了ステータスを保存するために使用されます。同時に、showModal()、closeModal()、submit() の 3 つのメソッドも定義しました。これらは、それぞれポップアップ ボックスの表示と閉じる、および確認ボタンのクリック動作を制御するために使用されます。

4. ページの使用法

上記の手順を完了すると、特定のページでカスタマイズしたポップアップ ボックスを使用できます。例:

<template>
  <view>
    <button type="button" @click="showModal">打开弹出框</button>
    <modal :visible.sync="visible"></modal>
  </view>
</template>

<script>
import Modal from '@/components/modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    }
  }
}
</script>

上記のコードでは、Vue コンポーネントの記述方法を使用し、import 構文で定義した Modal コンポーネントを導入し、data() メソッドでvisible という名前のデータ属性も定義しました。テンプレートでは、ボタン タグの @click バインディング イベントを通じて showModal メソッドを呼び出し、ポップアップ ボックスを表示します。

3. 概要

この時点で、UniApp ポップアップ ボックスをカスタマイズする完全なプロセスが完了しました。一般に、UniApp が提供するポップアップ ボックス コンポーネントには、基本的なニーズを満たすアラート() や確認() などのメソッドが組み込まれています。より複雑なポップアップ ボックスが必要な場合は、HTML レイアウトを使用できます。 CSS スタイル、JS コードなど。この点では、ポップアップ ボックスをカスタマイズした効果が得られます。この記事が皆さんの UniApp 開発作業に役立つことを願っています。

以上がuniappポップアップボックスの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。