uni-app はボタンをクリックしてプロンプト ボックス (ポップアップ ウィンドウの形式で表示) をポップアップし、[OK] を選択して [キャンセル] を選択します。

学習目標:

学习目标如下所示:

  • uni-app が送信ボタンをクリックすると、プロンプト ボックスがポップアップ表示され (ポップアップ ウィンドウの形式で表示されます)、送信を確認するかどうか (つまり、確認してキャンセルするか) をユーザーに尋ねます。データをバックエンドに転送するために実際の送信メソッドが呼び出され、[キャンセル] をクリックします。その後、モーダル ボックスはバックエンド インターフェイスを要求せずに自動的に消えます。

学習内容:

内容如下所示:

  1. ユーザーに確認が必要なモーダルボックスを表示します
    。送信ボタンをクリックすると、ポップアップウィンドウが表示されます
<view style="display: flex; justify-content: space-around;">
	  <button class="button" @click="submit">t提交</button>
</view>
  1. 呼び出されるメソッド
submit(){
			let that=this
			uni.showModal({
					title: '提示:',
					content: '请确认是否要提交?',
					success: function(res) {
						if (res.confirm) {
							// console.log('确定');
					     	//TODO
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
			});
		},

要約:

知识小结:

  • モーダルボックスの主な内容
uni.showModal({
   title: '提示',
   content: '请确认是否要提交?',
   success: function (res) {
       if (res.confirm) {
           console.log('用户点击确定');
       } else if (res.cancel) {
           console.log('用户点击取消');
       }
   }
});
  • 2. 注:
    uni.showModal メソッドのプロンプト ボックスのサイズは固定されており、フォント サイズを設定してプロンプト ボックス内のテキスト サイズを変更することはできません。テキストのサイズを制御したい場合は、CSS スタイルを通じて制御できます。つまり、フォント サイズは font-size: 16px; によって制御されます。
  • 3. 効果の例は次のとおりです。
    ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/YHLSunshine/article/details/131902597