ホームページ ウェブフロントエンド uni-app uniappポップアップボックスの実装方法

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

Apr 23, 2023 pm 04:40 PM

モバイル インターネットの人気に伴い、オンライン活動にスマートフォンやタブレットを使用する人がますます増えています。これに伴い、モバイルアプリや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 命令を使用してクリック イベントをバインドします。

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

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

  1. ページの使用法

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)