uniappポップアップボックスの実装方法-uni-app-php.cn

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

PHPz

リリース： 2023-04-23 17:22:13

オリジナル

14004 人が閲覧しました

モバイルインターネットの人気に伴い、オンライン活動にスマートフォンやタブレットを使用する人がますます増えています。これに伴い、モバイルアプリや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 ポップアップボックスを実装する方法を見てみましょう。

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 命令を使用してクリックイベントをバインドします。

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 などのルールを使用して定義しましたアニメーション、エフェクト。

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 つのメソッドも定義しました。これらは、それぞれポップアップボックスの表示と閉じる、および確認ボタンのクリック動作を制御するために使用されます。

ページの使用法

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

<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 サイトの他の関連記事を参照してください。