uniapp中uni-popup的具體使用
uni-pop彈出層組件，在應(yīng)用中彈出一個(gè)消息提示窗口、提示框等,可以設(shè)置彈出層的位置，是中間、底部、還是頂部。
如下圖效果所示：白色區(qū)域則為彈出的pop層。
一、 創(chuàng)建一個(gè)自定義組件：
1.項(xiàng)目中安裝下載uni-pop插件。
2.把pop內(nèi)容單獨(dú)寫個(gè)組件。這里放到 components下。 type="bottom"指的pop展示所在屏幕的位置。
<template>
<view>
<uni-popup ref="cityPhonePop" type="bottom">
<view class="popup-content">
<view class="contentPop columnPop">
<block v-for="(item,index) in array">
<view class="columnPop itemPop" @click="callPhone(item)">
<text>{{item.name}}：{{item.phone}}</text>
</view>
</block>
<view style="background:#f3f3f3;height:10rpx;width: 100%;"></view>
<view
style="min-height: 70rpx;display: flex; align-items: center;width: 100%;justify-content: center;"
@click="closeInfoPop">
<text>取消</text>
</view>
</view>
</view>
</uni-popup>
</view>
</template>在methods里面定義，用到的js方法：
methods: {
closeInfoPop() {
this.$refs.cityPhonePop.close()
},
//撥打電話
callPhone(item) {
var that = this;
uni.makePhoneCall({
phoneNumber: item.phone,
// phoneNumber: '025-83582006',
success: (res) => {
console.log('調(diào)用成功!')
that.closeInfoPop();
},
fail: (res) => {
console.log('調(diào)用失敗!')
}
});
},
open() {
//cityPhonePop是上面布局定義的uni-pop 的ref后面的名稱， this.$refs.cityPhonePop.open()則打開pop展示。
this.$refs.cityPhonePop.open()
},
close() {
this.$refs.cityPhonePop.close()
}
}此組件則定義完成。
二、頁面中使用上面創(chuàng)建的自定義組件：
1.先引入組件,并在components中聲明,則可以用cityPhone此組件了。
import cityPhone from "@/components/cityPhone.vue"
? ? export default {
? ? ? ? components: {
? ? ? ? ? ? cityPhone
? ? ? ? },
<script>
?? ?import cityPhone from "@/components/cityPhone.vue"
?? ?export default {
?? ??? ?components: {
?? ??? ??? ?cityPhone
?? ??? ?},
? ? },
?? ?methods: {
? ? ? ? ?? ?cityList: function() {
?? ??? ??? ??? ?this.$refs.phonePop.open()
?? ??? ??? ?}
? ? }
</scripty>2.頁面中使用此組件
<template>
<view>
<view @click="cityList()" style="padding:0;margin:0;background-color: #FFFFFF;"
class="member-benefits-1">
地市列表
</view>
<!--城市選擇彈窗 -->
<cityPhone ref="phonePop"></cityPhone>
</view>
</template>3.展示pop。則點(diǎn)擊地市列表,觸發(fā) cityList方法。此方法打開pop。
this.$refs.phonePop.open()
phonePop是上面2布局中cityPhone組件中，ref后面跟的名稱。
this.$refs.phonePop.open() ?//此open方法實(shí)際上是調(diào)用的。組件中的open方法，即下圖方法。
open() {
? ? ? ? ? ? ? ? //cityPhonePop是上面布局定義的uni-pop 的ref后面的名稱，即pop名 this.$refs.cityPhonePop.open()則打開pop展示。
?? ??? ??? ??? ?this.$refs.cityPhonePop.open()
?? ??? ??? ?},三、pop組件，擴(kuò)展詳情說明
1.pop位置，可以布局中設(shè)置type，同時(shí)可以打開pop的時(shí)候參數(shù)中傳入位置。
// 通過組件定義的ref調(diào)用uni-popup方法 ,如果傳入?yún)?shù) ，type 屬性將失效 ，僅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')2. 設(shè)置主窗口背景色
大多數(shù)場(chǎng)景下，并不需要設(shè)置 background-color 屬性,
而也有特例，需要我們主動(dòng)去設(shè)置背景色，例如 type = 'bottom' 的時(shí)候 ，在異型屏中遇到了底部安全區(qū)問題（如 iphone 11），因?yàn)?uni-popup的主要內(nèi)容避開了安全區(qū)（設(shè)置safe-area:true），導(dǎo)致底部的顏色我們無法自定義，這時(shí)候使用 background-color 就可以解決這個(gè)問題。
<button @click="open">打開彈窗</button> <uni-popup ref="popup" type="bottom" background-color="#fff">底部彈出 Popup</uni-popup>
3.禁用打開動(dòng)畫
在某些場(chǎng)景 ，可能不希望彈層有動(dòng)畫效果 ，只需要將 animation 屬性設(shè)置為 false 即可以關(guān)閉動(dòng)畫。
<button @click="open">打開彈窗</button> <uni-popup ref="popup" type="center" :animation="false">中間彈出 Popup</uni-popup>
4.禁用點(diǎn)擊遮罩關(guān)閉
默認(rèn)情況下，點(diǎn)擊遮罩會(huì)自動(dòng)關(guān)閉uni-popup，如不想點(diǎn)擊關(guān)閉，只需將mask-click設(shè)置為false，這時(shí)候要關(guān)閉uni-popup，只能手動(dòng)調(diào)用 close 方法。
<uni-popup ref="popup" :mask-click="false">
<text>Popup</text>
<button @click="close">關(guān)閉</button>
</uni-popup>到此這篇關(guān)于uniapp中uni-popup的具體使用的文章就介紹到這了,更多相關(guān)uniapp uni-popup內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js操作CheckBoxList實(shí)現(xiàn)全選/反選(在客服端完成)
對(duì)于CheckBoxList控件來說，一方面要實(shí)現(xiàn)大量數(shù)據(jù)在服務(wù)器端的綁定工作，另一方面往往要求實(shí)現(xiàn)全選、反選等功能,接下來將介紹js操作CheckBoxList實(shí)現(xiàn)全選/反選，感興趣的朋友可以了解下，或許對(duì)你有所幫助2013-02-02
javascript生成json數(shù)據(jù)簡(jiǎn)單示例分享
這篇文章主要介紹了javascript生成json數(shù)據(jù)示例,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript網(wǎng)頁關(guān)鍵字高亮代碼
非常不錯(cuò)的關(guān)鍵字高亮代碼，用js實(shí)現(xiàn)，這個(gè)方法不錯(cuò)2008-07-07
axios如何利用promise無痛刷新token的實(shí)現(xiàn)方法
這篇文章主要介紹了axios如何利用promise無痛刷新token的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
js處理php輸出時(shí)間戳對(duì)不上號(hào)的解決方法
JS時(shí)間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的，這就是為什么對(duì)不上號(hào)原因，處理方法如下2014-06-06
這篇文章主要介紹了微信小程序時(shí)間控件picker view的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript詳細(xì)分析數(shù)據(jù)類型和運(yùn)算符
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和運(yùn)算符案例,結(jié)合實(shí)例形式分析了JavaScript數(shù)據(jù)類型和運(yùn)算符特性與相關(guān)操作技巧,需要的朋友可以參考下2022-07-07
本篇文章主要是對(duì)JS 獲取各種瀏覽器窗口大小的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
解決JS內(nèi)存泄露之js對(duì)象和dom對(duì)象互相引用問題
這篇文章主要介紹了解決JS內(nèi)存泄露之js對(duì)象和dom對(duì)象互相引用問題,需要的朋友可以參考下2017-06-06