swan.showModal
解释:显示模态弹窗
方法参数
Object object
object参数说明
属性名 | 类型 | 必填 | 默认值 | 说明 |
---|
title | String | 是 | | 提示的标题 |
content | String | 是 | | 提示的内容 |
showCancel | Boolean | 否 | true | 是否显示取消按钮 。 |
cancelText | String | 否 | 取消 | 取消按钮的文字,最多 4 个字符。 |
cancelColor | HexColor | 否 | #000000 | 取消按钮的文字颜色。 |
confirmText | String | 否 | 确定 | 确定按钮的文字,最多 4 个字符。 |
confirmColor | HexColor | 否 | #3c76ff | 确定按钮的文字颜色。 |
success | Function | 否 | | 接口调用成功的回调函数 |
fail | Function | 否 | | 接口调用失败的回调函数 |
complete | Function | 否 | | 接口调用结束的回调函数(调用成功、失败都会执行) |
success返回参数说明
参数名 | 类型 | 说明 |
---|
confirm | Boolean | 为 true 时,表示用户点击了确定按钮 。 |
cancel | Boolean | 为 true 时,表示用户点击了取消。 |
示例
在开发者工具中预览效果
扫码体验
请使用百度APP扫码
代码示例1 - 默认样式:
<view class="card-area">
<view class="top-description border-bottom">默认样式</view>
<button bindtap="primary" type="primary" hover-stop-propagation="true">默认模态弹窗</button>
</view>
Page({
primary() {
swan.showModal({
title: '提示标题',
content: '提示内容、告知状态、信息和解决方法,描述尽量控制在两行内',
showCancel: true,
cancelText: '辅助操作',
confirmText: '主要操作'
});
}
});
代码示例2 - 无标题、单操作:
<view class="card-area">
<view class="top-description border-bottom">设置无标题,单操作按钮</view>
<button bindtap="showModalNotitle" type="primary" hover-stop-propagation="true">无标题模态弹窗</button>
</view>
Page({
showModalNotitle() {
swan.showModal({
content: '提示内容、告知状态、信息和解决方法,可以折行',
showCancel: false,
confirmText: '我知道了'
});
}
});
代码示例3 - 自定义选项颜色:
<view class="card-area">
<view class="top-description border-bottom">
<view>自定义选项颜色</view>
<view>
confirmColor=“#000000”
cancelColor=“#999999”
</view>
</view>
<button bindtap="showModalColor" type="primary" hover-stop-propagation="true">自定义选项颜色的模态弹窗</button>
</view>
Page({
showModalColor() {
swan.showModal({
title: '提示标题',
content: '提示内容、告知状态、信息和解决方法,描述尽量控制在两行内',
showCancel: true,
confirmText: '操作',
cancelText: '警示操作',
cancelColor: '#FF0000'
});
}
});
参考示例
参考示例1 - 开发者可在操作modal后进行业务逻辑
在开发者工具中预览效果
Page({
showModal() {
swan.showModal({
title: 'title',
content: 'content',
success(res) {
console.log(res)
if (res.confirm) {
console.log('用户点击了确定');
}
else if(res.cancel) {
console.log('用户点击了取消');
}
}
});
}
});
参考示例2 - 开发者可自定义一个showModal
在开发者工具中预览效果
<view class="wrap">
<button type="primary" bindtap="showModal" data-statu="open">点我打开自定义弹窗</button>
<!--mask-->
<view class="mask" bindtap="showModal" data-statu="close" s-if="{{showModalStatus}}"></view>
<!--content-->
<view animation="{{animationData}}" class="showModal-box" s-if="{{showModalStatus}}">
<view class="showModal-title">标题</view>
<view class="showModal-content">
<view class="border-bottom">可自定义展示接口请求返回的数据</view>
<view s-for="item, index in data" class="border-bottom">
<view>{{index}}</view>
<view>价钱:{{item.money}}</view>
<view>途径:{{item.source}}</view>
<view>类型:{{item.type}}</view>
<view>满减活动:{{item.upTo}}</view>
</view>
</view>
<view class="confirm" bindtap="showModal" data-statu="close">确定</view>
</view>
</view>
Page({
data: {
showModalStatus: false,
data: {}
},
showModal(e) {
var currentStatu = e.currentTarget.dataset.statu;
this.animation(currentStatu);
this.request();
},
animation(currentStatu){
var animation = swan.createAnimation({
duration: 1000,
timingFunction: "ease",
delay: 0
});
animation.opacity(0).rotateX(-100).step();
this.setData({
animationData: animation.export()
})
setTimeout(function () {
animation.opacity(1).rotateX(0).step();
this.setData({
animationData: animation
})
if (currentStatu == "close") {
this.setData({showModalStatus: false});
}
}.bind(this), 200)
if (currentStatu == "open") {
this.setData({showModalStatus: true});
}
},
request() {
swan.request({
url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
header: {
'content-type': 'application/json'
},
method: 'POST',
dataType: 'json',
responseType: 'text',
data: {
key: 'value'
},
success: res => {
this.setData({
data: res.data.data.couponList
})
},
fail: err => {
console.log('错误码:' + err.errCode);
console.log('错误信息:' + err.errMsg);
}
});
}
})
错误码
Android
iOS