创新互联百度小程序教程：swan.showModal

swan.showModal
- 方法参数
  - object 参数说明
  - success 返回参数说明
- 示例
  - 代码示例 1：默认样式
  - 代码示例 2：无标题、单操作
  - 代码示例 3：自定义选项颜色
- 错误码
  - Android
  - iOS

swan.showModal

解释：显示模态弹窗。用于同步用户重要信息，并要求用户进行确认，或执行特定操作以决策下一步骤。设计文档详见模态对话框。弹窗标题需措辞精简，建议控制在 8 个中文字符内。如果提示的内容简单，可以去掉弹窗标题。

方法参数

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 时，表示用户点击了取消

参数名	类型	说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

SWAN
JS

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

SWAN
JS

 
 
   
  
    
  
   设置无标题，单操作按钮

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

SWAN
JS

 
 
   
  
    
  
     
  
   自定义选项颜色  
  
     
  
   confirmColor="#F7544F"  
  
   cancelColor="#000000"

设计指南

可定制样式的只有选项按钮的文案颜色。

定义颜色时须有主次之分，可配合使用品牌色或主题色。但请注意，过多颜色并存，可能会影响用户判断。
对于不可逆的操作，建议使用红色（#ff1111），警告用户此操作的重要性。

 
 
   
  
  ![](/projects/smartprogram-20210306/d3263b4146a0acd071cdd118d8b1ca29.png)  
  
    
  
  正确  
  
    
  
  确定按钮（confirmColor）使用品牌色，与小程序整体风格更一致。  
  
    
  
    
  
    
  
  ![](/projects/smartprogram-20210306/7f0f50b4c4df26c9baabecc386985b92.png)  
  
    
  
  错误  
  
    
  
  多种强调色共用，导致按钮没有主次。

错误码

Android

201

解析失败，请检查调起协议是否合法

错误码	说明

iOS

202

解析失败，请检查参数是否正确

错误码	说明

网站标题：创新互联百度小程序教程：swan.showModal
本文URL：http://www.shufengxianlan.com/qtweb/news44/471344.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容