ホームページ > 記事 > WeChat アプレット > WeChat ミニ プログラムのカスタム モーダル ダイアログ ボックスの例の詳細な説明
この記事では主にWeChatアプレットのカスタムモーダルダイアログインスタンスの関連情報を詳しく紹介しますので、興味のある方は参考にしてください
公式APIが提供する表示モーダルポップアップのため、ウィンドウは単純にテキストを表示することしかできません。内容が異なり、ダイアログ ボックスの内容をカスタマイズできないため、柔軟性に欠けるため、モーダル ポップアップ ウィンドウの原理に基づいてカスタマイズされたモーダル ダイアログ ボックスを実装しました。
wx.showModal(OBJECT)
カスタマイズされた
モーダルダイアログ
関連ファイル
インターフェースwxml
スタイルwxcss
イベントとメソッドjs
レンダリング
インターフェースコード.wxml
<button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--弹窗--> <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-title">添加数量</view> <view class="modal-content"> <view class="modal-input"> <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input> </view> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view> </view> </view>
style.wxss
.show-btn { margin-top: 100rpx; color: #22cc22; } .modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff; } .modal-dialog { width: 540rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 9999; background: #f9f9f9; margin: -180rpx 105rpx; border-radius: 36rpx; } .modal-title { padding-top: 50rpx; font-size: 36rpx; color: #030303; text-align: center; } .modal-content { padding: 50rpx 32rpx; } .modal-input { display: flex; background: #fff; border: 2rpx solid #ddd; border-radius: 4rpx; font-size: 28rpx; } .input { width: 100%; height: 82rpx; font-size: 28rpx; line-height: 28rpx; padding: 0 20rpx; box-sizing: border-box; color: #333; } input-holder { color: #666; font-size: 28rpx; } .modal-footer { display: flex; flex-direction: row; height: 86rpx; border-top: 1px solid #dedede; font-size: 34rpx; line-height: 86rpx; } .btn-cancel { width: 50%; color: #666; text-align: center; border-right: 1px solid #dedede; } .btn-confirm { width: 50%; color: #ec5300; text-align: center; }
イベントとメソッド.js
Page({ data: { showModal: false, }, onLoad: function () { }, /** * 弹窗 */ showDialogBtn: function() { this.setData({ showModal: true }) }, /** * 弹出框蒙层截断touchmove事件 */ preventTouchMove: function () { }, /** * 隐藏模态对话框 */ hideModal: function () { this.setData({ showModal: false }); }, /** * 对话框取消按钮点击事件 */ onCancel: function () { this.hideModal(); }, /** * 对话框确认按钮点击事件 */ onConfirm: function () { this.hideModal(); } })
実装アイデアの解釈と原則
インターフェースの解釈:
構成されていますマスク レイヤー + ポップアップ ウィンドウのバインドされたデータ {{showModal}} は、ポップアップ ウィンドウの表示と非表示を制御するために使用されます
イベントとメソッドの解釈:
ポップアップ ウィンドウを表示するメソッド:
showDialogBtn: function() { this.setData({ showModal: true }) }
ポップアップウィンドウを非表示にする方法:
hideModal: function () { this.setData({ showModal: false }); }
ここで特に注意すべき点があります。それは次の方法です:
preventTouchMove: function () { }
なぜ空なのか方法? インターフェース wxml と組み合わせて表示する必要があるため、マスクされたビューにはイベント バインディング catchtouchmove="preventTouchMove" があります。 これを記述する理由は、イベントの下向き送信をブロックし、ポップアップ ウィンドウの後にマスクの下のインターフェイスをクリックまたはスライドできないようにするためです。このように書かずに、メインインターフェイスがスクロール可能なインターフェイスである場合、ポップアップウィンドウが表示されたときにユーザーがスクロールリストを操作することもできることを考えてください。プロダクトマネージャーがあなたのところに来ると思います。
3. スタイルの解釈: (このタイトルにはコード ブロック識別子がありませんが、コード ブロックのように表示されます。これはバグです!!! - -)
.modal-mask と .modal-mask の書き方。モーダルダイアログスタイル 特別な注意が必要です。
重要なのは、ポップアップ ウィンドウが最上位のレイヤーにあり、インターフェイスによってブロックされていないことです。その後、マスキング レイヤーがインターフェイスをブロックする必要がありますが、ポップアップ ウィンドウはブロックできません。したがって、.modal-mask と .modal-dialog の z-index 値に注意する必要があります。
以上がWeChat ミニ プログラムのカスタム モーダル ダイアログ ボックスの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。