组件说明:
显示模态弹窗
wx.showModal(OBJECT)
组件用法：
wxml
-
<view class="page">
-
<view class="page__hd">
-
<text class="page__title">modal</text>
-
<text class="page__desc">模式对话框</text>
-
</view>
-
<view class="page__bd">
-
<view class="btn-area">
-
<button type="default" bindtap="showModel1">简单设定的modal</button>
-
<button type="default" bindtap="showModel2">全部自定义设定的modal2</button>
-
</view>
-
</view>
-
</view>
js
-
Page({
-
data: {
-
},
-
showModel1:function(){
-
wx.showModal({
-
title: '提示',
-
content: '这是一个简单设置的弹窗',
-
success: function(res) {
-
if (res.confirm) {
-
console.log('用户点击确定')
-
}
-
}
-
})
-
},
-
showModel2:function(){
-
wx.showModal({
-
title: '提示',
-
content: '这是一个设定过全部属性模态弹窗',
-
showCancel: true,
-
confirmText:'好的',
-
confirmColor:'#FF0000',
-
cancelText: '算了',
-
cancelColor:'#999999',
-
success: function(res) {
-
if (res.confirm) {
-
console.log('用户点击确定');
-
}else{
-
console.log('用户点击取消');
-
}
-
},
-
fail:function(){
-
console.log('接口调用失败');
-
},
-
complete:function(){
-
console.log('接口调用结束')
-
}
-
})
-
},
-
})
wxss
-
.page {
-
min-height: 100%;
-
flex: 1;
-
background-color: #FBF9FE;
-
font-size: 32rpx;
-
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
-
overflow: hidden;
-
}
-
.page__hd{
-
padding: 50rpx 50rpx 100rpx 50rpx;
-
text-align: center;
-
}
-
.page__title{
-
display: inline-block;
-
padding: 20rpx 40rpx;
-
font-size: 32rpx;
-
color: #AAAAAA;
-
border-bottom: 1px solid #CCCCCC;
-
}
-
.page__desc{
-
display: none;
-
margin-top: 20rpx;
-
font-size: 26rpx;
-
color: #BBBBBB;
-
}
-
.btn-area{
-
padding: 0 30px;
-
}
-
.btn-area button{
-
margin-top: 20rpx;
-
margin-bottom: 20rpx;
-
}
主要属性：
|
参数
|
类型
|
必填
|
说明
|
|
title |
String |
是 |
提示的标题 |
|
content |
String |
是 |
提示的内容 |
|
showCancel |
Boolean |
否 |
是否显示取消按钮，默认为 true |
|
cancelText |
String |
否 |
取消按钮的文字，默认为”取消”，最多 4 个字符 |
|
cancelColor |
HexColor |
否 |
取消按钮的文字颜色，默认为”#000000” |
|
confirmText |
String |
否 |
确定按钮的文字，默认为”确定”，最多 4 个字符 |
|
confirmColor |
HexColor |
否 |
确定按钮的文字颜色，默认为”#3CC51F” |
|
success |
Function |
否 |
接口调用成功的回调函数，返回res.confirm为true时，表示用户点击确定按钮 |
|
fail |
Function |
否 |
接口调用失败的回调函数 |
|
complete |
Function |
否 |
接口调用结束的回调函数（调用成功、失败都会执行） |
|
