前端之家收集整理的这篇文章主要介绍了uni-app中弹窗的使用,前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
提示:以下是本篇文章正文内容,下面案例可供参考
示例:在前端开发中,为了优化用户的交互体验,常需要用到弹窗来进行提示,引导用户操作,而js里的alter用起来是真的丑,所有今天看了一下uni-app里的弹窗,感觉还不错,就记一下。
代码如下(示例):
uni.showToast({
title: data[0],
icon:'exception',
duration:850
});
几个常用的属性:
属性 | 值类型 | 说明 |
---|---|---|
title | String | 即消息框中显示的文本内容 |
icon | String | 即显示的图标,值有{success,error,fail,exception,loading,none},传不同的参数显示不同的图标效果 |
duration | Number | 消息框显示的时间,毫秒为单位 |
image | Sting | 自定义图标的本地路径(app端暂不支持gif |
mask | Boolean | 是否显示透明蒙层,防止触摸穿透,默认:false |
position | String | 纯文本轻提示显示位置,填写有效值后只有 title 属性生效, 有效值详见下方说明。 |
success | Function | 接口调用成功的回调函数 |
fail | Function | 接口调用失败的回调函数 |
complete | Function | 接口调用结束的回调函数(调用成功、失败都会执行) |
显示效果如下:
代码如下(示例):
uni.showModal({
title: data[1],
content: data[0],
showCancel:false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
几个常用的属性:
属性 | 值类型 | 说明 |
---|---|---|
title | String | 即消息框的标题 |
content | String | 即消息框的内容 |
showCancel | Boolean | 可选,是否显示取消按钮,bool类型,默认未true,ture为显示,false相反 |
cancelText | String | 取消按钮文本内容 |
confimrText | String | 确认按钮文本内容 |
cancelColor | HexColor | 取消按钮文本颜色 |
confirmColor | HexColor | 确认按钮文本颜色 |
editable | Boolean | 是否显示输入框 |
placeholderText | String | 显示输入框时的提示文本 |
success | Function | 接口调用成功的回调函数 |
fail | Function | 接口调用失败的回调函数 |
complete | Function | 接口调用结束的回调函数(调用成功、失败都会执行) |
显示效果如下
代码如下(示例):
uni.showActionSheet({
itemList: [data],
success: function (res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function (res) {
console.log(res.errMsg);
}
});
几个常用的属性:
属性 | 值类型 | 说明 |
---|---|---|
itemList | Array | 按钮的文字数组 |
itemColor | HexColor | 按钮的文字颜色,字符串格式,默认为"#000000" |
popover | Object | 大屏设备弹出原生选择按钮框的指示区域,默认居中显示 |
success | Function | 接口调用成功的回调函数 |
fail | Function | 接口调用失败的回调函数 |
complete | Function | 接口调用结束的回调函数(调用成功、失败都会执行) |
显示效果如下:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了uni-app弹窗的使用,如果在开发过程中遇到更复杂的业务则需要自己开发组件了,具体情况具体写代码噻!
uni-app官方文档:https://uniapp.dcloud.io/
以上是前端之家为你收集整理的uni-app中弹窗的使用全部内容,希望文章能够帮你解决uni-app中弹窗的使用所遇到的程序开发问题。
如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。