微信小程序弹框wx.showModal如何修改样式

<!--index.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>

/**index.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;
}

//获取应用实例var app = getApp()
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();}
})

微信小程序弹框wx.showModal如何修改样式相关推荐

小程序弹框wx.showModal、wx.showActionSheet、wx.showToast
wx.showModal wx.showModal({ title: '删除图片', content: '确定要删除该图片?', showCancel: true,//是否显示取消按钮 cancelT ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
微信小程序——提示弹窗wx.showModal
微信小程序里面的提示框实现,先来张示例图: 先在.wxml里面写好布局文件,这里拿删除按钮作为示例: <view class="buttonVie ...
修改小程序swiper 点的样式_请问微信小程序swiper切换的点如何修改样式。
学小程序时写过一个B站demo,也遇到此问题,最后自定义Swiper的Dot来实现了. 思路是:用view组件重写dot,给swiper组件绑定bindchange事件用来获取当前第几个dot,动态改 ...
微信小程序弹框禁止下面的页面滚动
一句话搞定: catchtouchmove="true" <view class="mark" wx:if='{{show}}' catchtouchmo ...
微信小程序弹框组件封装
popup组件,居中和底部弹起 1.popup.wxml <view class="popup-common fade-in-linear-enter-active {{ flag ? ...
微信小程序提示框使用，wx.showToast
微信小程序提示框使用 1.wx.showToast在官方文档的位置 2.使用代码模板 wx.showToast({title: '价格不能等于0',icon: 'success',duration: ...
微信小程序提示框提示
微信小程序提示框很常见,有的项目弹出提示选择关闭的时候需要不再弹出,清理缓存的时候才弹出. var s = wx.getStorageSync('sh')if (s == '') {// s= tru ...
封装微信小程序提示框
下面是封装好的封装微信小程序提示框,以便在开发过程中能快速使用,并且可以减少代码量. var showBusy = function(o) { return wx.showToast({ ...
微信小程序-气泡框 Popover
写在前面记录基于微信小程序-气泡框实现中产生的问题及思考问题截图问题描述模拟器显示正常,但在真机上点击后,气泡框的箭头并没有消失,且点击同一级别区域,能利用覆盖消除箭头.[是不是一个很可爱的b ...

微信小程序弹框wx.showModal如何修改样式

微信小程序弹框wx.showModal如何修改样式相关推荐

最新文章

热门文章