uni-app中弹窗的使用与自定义弹窗的方法
发表于：2024-11-22 作者：热门IT资讯网编辑
编辑最后更新 2024年11月22日，这篇文章主要介绍"uni-app中弹窗的使用与自定义弹窗的方法"，在日常操作中，相信很多人在uni-app中弹窗的使用与自定义弹窗的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希
这篇文章主要介绍"uni-app中弹窗的使用与自定义弹窗的方法"，在日常操作中，相信很多人在uni-app中弹窗的使用与自定义弹窗的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"uni-app中弹窗的使用与自定义弹窗的方法"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一、uni-app中自带的弹窗
示例：在前端开发中，为了优化用户的交互体验，常需要用到弹窗来进行提示，引导用户操作，而js里的alter用起来是真的丑，所有今天看了一下uni-app里的弹窗，感觉还不错，就记一下。
二、实例
1、uni.showToast(OBJECT)（消息提示框）
代码如下（示例）：
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 | 接口调用结束的回调函数（调用成功、失败都会执行） |
显示效果如下：
2、uni.showModal(OBJECT)(显示两个按钮的提示框)
代码如下（示例）：
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 | 接口调用结束的回调函数（调用成功、失败都会执行） |
显示效果如下
3、uni.showActionSheet(OBJECT)(从底部向上弹出操作菜单)
代码如下(示例):
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 | 接口调用结束的回调函数（调用成功、失败都会执行） |
显示效果如下:
补充：uniapp自定义弹窗
基本需求中需要点开卡片，设置卡片中某一列的数量，这里需要打开一个弹窗设置，但是uniapp中默认的弹窗组件中都没有可以提示输入的，我知道插件市场已有了很多组件，但是今天还是分享一下这个自己写自定义弹窗。话不多说，直接看效果。
附上源码
修改数量 确定
js方法
css样式属性
.popup_overlay { position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=88); } .popup_content { position: fixed; top: 50%; left: 50%; width: 480rpx; height: 240rpx; margin-left: -270rpx; margin-top: -270rpx; border: 10px solid white; background-color: white; z-index: 1002; overflow: auto; } .popup_title { width: 480rpx; text-align: center; font-size: 32rpx; } .popup_textarea_item { padding-top: 5rpx; height: 50rpx; width: 440rpx; background-color: #F1F1F1; margin-top: 20rpx; margin-left: 20rpx; padding-top: 25rpx; } .popup_textarea { width: 410rpx; font-size: 26rpx; margin-left: 20rpx; } .popup_button { color: #000000; } .buttons{ text-align: center; font-size: 50rpx; margin-top: 40rpx; background-color: #007AFF; }到此，关于"uni-app中弹窗的使用与自定义弹窗的方法"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！