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="#F7544F"
                    cancelColor="#000000"
                </view>
            </view>
            <button bindtap="showModalColor" type="primary" hover-stop-propagation="true">自定义选项颜色的模态弹窗</button>
        </view>
        
        Page({
            showModalColor() {
                swan.showModal({
                    title: '提示标题',
                    content: '提示内容、告知状态、信息和解决方法,描述尽量控制在两行内',
                    showCancel: true,
                    confirmText: '警示操作',
                    cancelText: '取消',
                    cancelColor: '#000000',
                    confirmColor: '#F7544F'
                });
            }
        });
        

        # 参考示例

        # 参考示例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

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

            # iOS

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