微信小程序中自定义模态对话框的实例详解

微信小程序中自定义模态对话框的实例详解
这篇文章主要为大家详细介绍了微信小程序自定义模态对话框实例的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了微信小程序自定义模态对话框实例的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

由于官方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>