prompt.md 6.1 KB
Newer Older
M
mehaotian 已提交
1 2 3 4 5 6 7 8 9 10
### uni.showToast(OBJECT)

显示消息提示框。

**OBJECT参数说明**

|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|title|String|是|提示的内容,长度与 icon 取值有关。||
|icon|String|否|图标,有效值详见下方说明。||
W
wanganxp 已提交
11 12 13 14
|image|String|否|自定义图标的本地路径|App、H5、微信小程序、百度小程序|
|mask|Boolean|否|是否显示透明蒙层,防止触摸穿透,默认:false|App、微信小程序|
|duration|Number|否|提示的延迟时间,单位毫秒,默认:1500||
|position|String|否|纯文本轻提示显示位置,填写有效值后只有 `title` 属性生效, 有效值详见下方说明。|App|
M
mehaotian 已提交
15 16 17 18 19 20 21 22 23 24
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |

**icon 值说明**

|值|说明|平台差异说明|
|:-|:-|:-|
|success|显示成功图标,此时 title 文本最多显示 7 个汉字长度。默认值||
|loading|显示加载图标,此时 title 文本最多显示 7 个汉字长度。|支付宝小程序不支持|
W
wanganxp 已提交
25
|none|不显示图标,此时 title 文本在`小程序`最多可显示两行,`App`仅支持单行显示。| |
M
mehaotian 已提交
26 27 28 29 30 31 32 33 34

**示例**

```javascript
uni.showToast({
	title: '标题',
	duration: 2000
});
```
W
wanganxp 已提交
35 36

**position 值说明(仅App生效)**
M
mehaotian 已提交
37 38 39 40 41

|值|说明|
|:-|:-|
|top|居上显示|
|center|居中显示|
W
wanganxp 已提交
42
|bottom|居底显示|
M
mehaotian 已提交
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

**Tips**

App端可通过[plus.nativeUI.toast API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast)实现更多功能。

### uni.hideToast()

隐藏消息提示框。

**示例**

```javascript
uni.hideToast();
```


### uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 [uni.hideLoading](api/ui/prompt?id=hideloading) 才能关闭提示框。

**OBJECT参数说明**

|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|title|String|是|提示的内容||
W
wanganxp 已提交
68
|mask|Boolean|否|是否显示透明蒙层,防止触摸穿透,默认:false|App、微信小程序、百度小程序|
M
mehaotian 已提交
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |

**示例**

```javascript
uni.showLoading({
	title: '加载中'
});
```

### uni.hideLoading()

隐藏 loading 提示框。

**示例**

```javascript
uni.showLoading({
	title: '加载中'
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);
```

### uni.showModal(OBJECT)

显示模态弹窗,类似于标准 html 的消息框:alert、confirm。

**OBJECT参数说明**

|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
雪洛's avatar
雪洛 已提交
105 106
|title|String|否|提示的标题||
|content|String|否|提示的内容||
M
mehaotian 已提交
107 108 109 110 111 112 113 114
|showCancel|Boolean|否|是否显示取消按钮,默认为 true||
|cancelText|String|否|取消按钮的文字,默认为"取消",最多 4 个字符||
|cancelColor|HexColor|否|取消按钮的文字颜色,默认为"#000000"|H5、微信小程序、百度小程序|
|confirmText|String|否|确定按钮的文字,默认为"确定",最多 4 个字符||
|confirmColor|HexColor|否|确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff"|H5、微信小程序、百度小程序|
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |
雪洛's avatar
雪洛 已提交
115 116 117 118

**注意**

- 钉钉小程序真机与模拟器表现有差异,真机title,content均为必填项
M
mehaotian 已提交
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187

**success返回参数说明**

|参数|类型|说明|
|:-|:-|:-|:-|
|confirm|Boolean|为 true 时,表示用户点击了确定按钮|
|cancel|Boolean|为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)|

**Tips:**
* 在 App 下可以使用 [原生增强提示框插件](https://ext.dcloud.net.cn/plugin?id=36) 来解决 App 无法设置 cancelColor、confirmColor的问题。


**示例**

```javascript
uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});
```

### uni.showActionSheet(OBJECT)

​显示操作菜单

**OBJECT参数说明**

|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|itemList|Array<String>|是|按钮的文字数组|微信、百度、头条小程序数组长度最大为6个|
|itemColor|HexColor|否|按钮的文字颜色,字符串格式,默认为"#000000"|头条小程序不支持|
|success|Function|否|接口调用成功的回调函数,详见返回参数说明||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |

**success返回参数说明**

|参数|类型|说明|
|:-|:-|:-|
|tapIndex|Number|用户点击的按钮,从上到下的顺序,从0开始|

**示例**

```javascript
uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});
```

**Tips**

App端实现原生的、复杂的底部图文菜单,例如分享菜单,可参考[https://ext.dcloud.net.cn/plugin?id=69](https://ext.dcloud.net.cn/plugin?id=69)

**注意**

- 本章的所有弹出控件都是原生控件,层级最高,可覆盖video、map、tabbar等原生控件。
W
wanganxp 已提交
188 189
- [uni-app插件市场](https://ext.dcloud.net.cn/)有很多封装好的前端组件,但注意前端组件层级不是最高,无法覆盖原生组件,除非使用cover-view或nvue。
- App端还有原生的[prompt API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.prompt)