uni-app中彈窗的使用與自定義彈窗
更新時(shí)間：2022年04月22日 11:10:50 作者：不要叫我狗哥
眾所周知彈窗在我們實(shí)際開發(fā)場(chǎng)景中是非常常用的,最近在工作中就遇到了相關(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)的彈窗組件中都沒有可以提示輸入的，我知道插件市場(chǎng)已有了很多組件，但是今天還是分享一下這個(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)容，本文僅僅簡(jiǎn)單介紹了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)文章
這篇文章主要介紹了socket在egg中的使用，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
javascript獲取本機(jī)操作系統(tǒng)類型的方法
關(guān)于我們使用電腦的操作系統(tǒng)，我們通過鼠標(biāo)點(diǎn)擊就能獲取，如果我們想用腳本怎么實(shí)現(xiàn)javascript獲取本機(jī)操作系統(tǒng)類型的方法呢，下面給大家分享javascript獲取本機(jī)操作系統(tǒng)類型的方法，需要的朋友可以參考下2015-08-08
[醬色]鼠標(biāo)放上去則向上向下滾動(dòng)的代碼...2006-11-11
在Javascript中定義對(duì)象類別...2006-12-12
下面小編就為大家分享一篇js操作二進(jìn)制數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)的大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章給大家詳細(xì)介紹了JavaScript中EventLoop的相關(guān)知識(shí)，有這方面需要的朋友參考學(xué)習(xí)下。2018-01-01
今天小編就為大家分享一篇關(guān)于js獲取form表單中name屬性的值，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-02-02
JavaScript中關(guān)鍵字 in 的使用方法詳解
這篇文章主要介紹了JavaScript中關(guān)鍵字 in 的使用方法詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
requirejs按需加載angularjs文件實(shí)例
本篇文章主要介紹了requirejs按需加載angularjs文件實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
JavaScript指定字段排序方法sortFun函數(shù)
這篇文章主要介紹了JavaScript指定字段排序方法sortFun函數(shù)，數(shù)組的排序方法是sort，但是它并不支持根據(jù)指定的字段進(jìn)行排序，而sortFun可以根據(jù)指定的字段進(jìn)行排序，需要的朋友可以參考下2023-05-05