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});

几个常用的属性：

显示效果如下：

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('用户点击取消');}}});

几个常用的属性：

显示效果如下

3、uni.showActionSheet(OBJECT)(从底部向上弹出操作菜单)

代码如下(示例):

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

几个常用的属性：

显示效果如下:

补充：uniapp自定义弹窗

基本需求中需要点开卡片，设置卡片中某一列的数量，这里需要打开一个弹窗设置，但是uniapp中默认的弹窗组件中都没有可以提示输入的，我知道插件市场已有了很多组件，但是今天还是分享一下这个自己写自定义弹窗。话不多说，直接看效果。

附上源码

<view><view><button @click="showDiv()">出来吧，我的弹窗！</button></view><view :hidden="userFeedbackHidden" class="popup_content"><view class="popup_title">修改数量</view><view class="popup_textarea_item"><input type="text" class="popup_textarea" value=""  v-model="feedbackContent" placeholder="输入修改的数量"/><view @click="submitFeedback()" class="buttons"><text class="popup_button">确定</text></view></view></view><view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view></view>

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中弹窗的使用与自定义弹窗的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！