uni-app中彈窗的使用與自定義彈窗
更新時(shí)間：2022年04月22日 11:10:50 作者：不要叫我狗哥
眾所周知彈窗在我們實(shí)際開發(fā)場景中是非常常用的,最近在工作中就遇到了相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于uni-app中彈窗使用與自定義彈窗的相關(guān)資料,需要的朋友可以參考下
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、uni-app中自帶的彈窗
示例：在前端開發(fā)中，為了優(yōu)化用戶的交互體驗(yàn)，常需要用到彈窗來進(jìn)行提示，引導(dǎo)用戶操作，而js里的alter用起來是真的丑，所有今天看了一下uni-app里的彈窗，感覺還不錯(cuò)，就記一下。
二、實(shí)例
1、uni.showToast(OBJECT)（消息提示框）
代碼如下（示例）：
uni.showToast({
title: data[0],
icon:'exception',
duration:850
});
幾個(gè)常用的屬性：
| 屬性 | 值類型 | 說明 |
|---|---|---|
| title | String | 即消息框中顯示的文本內(nèi)容 |
| icon | String | 即顯示的圖標(biāo)，值有{success,error,fail,exception,loading,none}，傳不同的參數(shù)顯示不同的圖標(biāo)效果 |
| duration | Number | 消息框顯示的時(shí)間，毫秒為單位 |
| image | Sting | 自定義圖標(biāo)的本地路徑（app端暫不支持gif |
| mask | Boolean | 是否顯示透明蒙層，防止觸摸穿透，默認(rèn)：false |
| position | String | 純文本輕提示顯示位置，填寫有效值后只有 title 屬性生效， 有效值詳見下方說明。 |
| success | Function | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
顯示效果如下：
2、uni.showModal(OBJECT)(顯示兩個(gè)按鈕的提示框)
代碼如下（示例）：
uni.showModal({
title: data[1],
content: data[0],
showCancel:false,
success: function (res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定');
} else if (res.cancel) {
console.log('用戶點(diǎn)擊取消');
}
}
});
幾個(gè)常用的屬性：
| 屬性 | 值類型 | 說明 |
|---|---|---|
| title | String | 即消息框的標(biāo)題 |
| content | String | 即消息框的內(nèi)容 |
| showCancel | Boolean | 可選,是否顯示取消按鈕，bool類型,默認(rèn)未true,ture為顯示,false相反 |
| cancelText | String | 取消按鈕文本內(nèi)容 |
| confimrText | String | 確認(rèn)按鈕文本內(nèi)容 |
| cancelColor | HexColor | 取消按鈕文本顏色 |
| confirmColor | HexColor | 確認(rèn)按鈕文本顏色 |
| editable | Boolean | 是否顯示輸入框 |
| placeholderText | String | 顯示輸入框時(shí)的提示文本 |
| success | Function | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
顯示效果如下
3、uni.showActionSheet(OBJECT)(從底部向上彈出操作菜單)
代碼如下(示例):
uni.showActionSheet({
itemList: [data],
success: function (res) {
console.log('選中了第' + (res.tapIndex + 1) + '個(gè)按鈕');
},
fail: function (res) {
console.log(res.errMsg);
}
});
幾個(gè)常用的屬性：
| 屬性 | 值類型 | 說明 |
|---|---|---|
| itemList | Array | 按鈕的文字?jǐn)?shù)組 |
| itemColor | HexColor | 按鈕的文字顏色，字符串格式，默認(rèn)為"#000000" |
| popover | Object | 大屏設(shè)備彈出原生選擇按鈕框的指示區(qū)域，默認(rèn)居中顯示 |
| success | Function | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
顯示效果如下:
補(bǔ)充：uniapp自定義彈窗
基本需求中需要點(diǎn)開卡片，設(shè)置卡片中某一列的數(shù)量，這里需要打開一個(gè)彈窗設(shè)置，但是uniapp中默認(rèn)的彈窗組件中都沒有可以提示輸入的，我知道插件市場已有了很多組件，但是今天還是分享一下這個(gè)自己寫自定義彈窗。話不多說，直接看效果。
附上源碼
<view> <view> <button @click="showDiv()">出來吧，我的彈窗！</button> </view> <view :hidden="userFeedbackHidden" class="popup_content"> <view class="popup_title">修改數(shù)量</view> <view class="popup_textarea_item"> <input type="text" class="popup_textarea" value="" v-model="feedbackContent" placeholder="輸入修改的數(shù)量"/> <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;
}
總結(jié)
例如：以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了uni-app彈窗的使用，如果在開發(fā)過程中遇到更復(fù)雜的業(yè)務(wù)則需要自己開發(fā)組件了，具體情況具體寫代碼噻！
uni-app官方文檔：https://uniapp.dcloud.io/
到此這篇關(guān)于uni-app中彈窗的使用與自定義彈窗的文章就介紹到這了,更多相關(guān)uni-app彈窗使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇)
這篇文章主要介紹了全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇)的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了js代碼觸發(fā)事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了如何實(shí)現(xiàn)js拖拽效果及原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JS實(shí)現(xiàn)閃動(dòng)的title消息提醒效果
這篇文章主要介紹了JS實(shí)現(xiàn)閃動(dòng)的title消息提醒效果,考慮并兼容了大部份的瀏覽器,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了微信小程序返回上一頁傳參并刷新過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章介紹了Webpack4.x的四個(gè)核心概念介紹，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Bootstrap基本組件學(xué)習(xí)筆記之面板(14)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之面板,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)
在項(xiàng)目開發(fā)中,有時(shí)候需要使用JavaScript驗(yàn)證用戶輸入的是否為正整數(shù),這篇文章主要給大家介紹了關(guān)于JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)的相關(guān)資料,需要的朋友可以參考下,2023-11-11
微信小程序中我們創(chuàng)建頁面時(shí)會(huì)自動(dòng)創(chuàng)建四個(gè)文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角json配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及頁面配置的相關(guān)資料,需要的朋友可以參考下2022-07-07