swan.showModal

解释:显示模态弹窗

方法参数

Object object

object参数说明

属性名类型必填默认值说明
titleString提示的标题
contentString提示的内容
showCancelBooleantrue是否显示取消按钮 。
cancelTextString取消取消按钮的文字,最多 4 个字符。
cancelColorHexColor#000000取消按钮的文字颜色。
confirmTextString确定确定按钮的文字,最多 4 个字符。
confirmColorHexColor#3c76ff确定按钮的文字颜色。
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明

参数名类型说明
confirmBoolean为 true 时,表示用户点击了确定按钮 。
cancelBoolean为 true 时,表示用户点击了取消。

示例

在开发者工具中预览效果

扫码体验

swan.showModal - 图1请使用百度APP扫码

代码示例1 - 默认样式:

  1. <view class="card-area">
  2. <view class="top-description border-bottom">默认样式</view>
  3. <button bindtap="primary" type="primary" hover-stop-propagation="true">默认模态弹窗</button>
  4. </view>
  1. Page({
  2. primary() {
  3. swan.showModal({
  4. title: '提示标题',
  5. content: '提示内容、告知状态、信息和解决方法,描述尽量控制在两行内',
  6. showCancel: true,
  7. cancelText: '辅助操作',
  8. confirmText: '主要操作'
  9. });
  10. }
  11. });

代码示例2 - 无标题、单操作:

  1. <view class="card-area">
  2. <view class="top-description border-bottom">设置无标题,单操作按钮</view>
  3. <button bindtap="showModalNotitle" type="primary" hover-stop-propagation="true">无标题模态弹窗</button>
  4. </view>
  1. Page({
  2. showModalNotitle() {
  3. swan.showModal({
  4. content: '提示内容、告知状态、信息和解决方法,可以折行',
  5. showCancel: false,
  6. confirmText: '我知道了'
  7. });
  8. }
  9. });

代码示例3 - 自定义选项颜色:

  1. <view class="card-area">
  2. <view class="top-description border-bottom">
  3. <view>自定义选项颜色</view>
  4. <view>
  5. confirmColor=“#000000”
  6. cancelColor=“#999999”
  7. </view>
  8. </view>
  9. <button bindtap="showModalColor" type="primary" hover-stop-propagation="true">自定义选项颜色的模态弹窗</button>
  10. </view>
  1. Page({
  2. showModalColor() {
  3. swan.showModal({
  4. title: '提示标题',
  5. content: '提示内容、告知状态、信息和解决方法,描述尽量控制在两行内',
  6. showCancel: true,
  7. confirmText: '操作',
  8. cancelText: '警示操作',
  9. cancelColor: '#FF0000'
  10. });
  11. }
  12. });

参考示例

参考示例1 - 开发者可在操作modal后进行业务逻辑

在开发者工具中预览效果

  1. Page({
  2. showModal() {
  3. swan.showModal({
  4. title: 'title',
  5. content: 'content',
  6. success(res) {
  7. console.log(res)
  8. if (res.confirm) {
  9. console.log('用户点击了确定');
  10. }
  11. else if(res.cancel) {
  12. console.log('用户点击了取消');
  13. }
  14. }
  15. });
  16. }
  17. });

参考示例2 - 开发者可自定义一个showModal

在开发者工具中预览效果

  1. <view class="wrap">
  2. <button type="primary" bindtap="showModal" data-statu="open">点我打开自定义弹窗</button>
  3. <!--mask-->
  4. <view class="mask" bindtap="showModal" data-statu="close" s-if="{{showModalStatus}}"></view>
  5. <!--content-->
  6. <view animation="{{animationData}}" class="showModal-box" s-if="{{showModalStatus}}">
  7. <view class="showModal-title">标题</view>
  8. <view class="showModal-content">
  9. <view class="border-bottom">可自定义展示接口请求返回的数据</view>
  10. <view s-for="item, index in data" class="border-bottom">
  11. <view>{{index}}</view>
  12. <view>价钱:{{item.money}}</view>
  13. <view>途径:{{item.source}}</view>
  14. <view>类型:{{item.type}}</view>
  15. <view>满减活动:{{item.upTo}}</view>
  16. </view>
  17. </view>
  18. <view class="confirm" bindtap="showModal" data-statu="close">确定</view>
  19. </view>
  20. </view>
  1. Page({
  2. data: {
  3. showModalStatus: false,
  4. data: {}
  5. },
  6. showModal(e) {
  7. var currentStatu = e.currentTarget.dataset.statu;
  8. this.animation(currentStatu);
  9. this.request();
  10. },
  11. animation(currentStatu){
  12. var animation = swan.createAnimation({
  13. duration: 1000,
  14. timingFunction: "ease",
  15. delay: 0
  16. });
  17. animation.opacity(0).rotateX(-100).step();
  18. this.setData({
  19. animationData: animation.export()
  20. })
  21. setTimeout(function () {
  22. animation.opacity(1).rotateX(0).step();
  23. this.setData({
  24. animationData: animation
  25. })
  26. if (currentStatu == "close") {
  27. this.setData({showModalStatus: false});
  28. }
  29. }.bind(this), 200)
  30. if (currentStatu == "open") {
  31. this.setData({showModalStatus: true});
  32. }
  33. },
  34. request() {
  35. swan.request({
  36. url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  37. header: {
  38. 'content-type': 'application/json'
  39. },
  40. method: 'POST',
  41. dataType: 'json',
  42. responseType: 'text',
  43. data: {
  44. key: 'value'
  45. },
  46. success: res => {
  47. this.setData({
  48. data: res.data.data.couponList
  49. })
  50. },
  51. fail: err => {
  52. console.log('错误码:' + err.errCode);
  53. console.log('错误信息:' + err.errMsg);
  54. }
  55. });
  56. }
  57. })

错误码

Android

错误码说明
201解析失败,请检查调起协议是否合法

iOS

错误码说明
202解析失败,请检查参数是否正确