uniapp中uni-popup的具體使用
uni-pop彈出層組件，在應(yīng)用中彈出一個消息提示窗口、提示框等,可以設(shè)置彈出層的位置，是中間、底部、還是頂部。
如下圖效果所示：白色區(qū)域則為彈出的pop層。
一、 創(chuàng)建一個自定義組件：
1.項目中安裝下載uni-pop插件。
2.把pop內(nèi)容單獨寫個組件。這里放到 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。則點擊地市列表,觸發(fā) cityList方法。此方法打開pop。
this.$refs.phonePop.open()
phonePop是上面2布局中cityPhone組件中，ref后面跟的名稱。
this.$refs.phonePop.open() ?//此open方法實際上是調(diào)用的。組件中的open方法，即下圖方法。
open() {
? ? ? ? ? ? ? ? //cityPhonePop是上面布局定義的uni-pop 的ref后面的名稱，即pop名 this.$refs.cityPhonePop.open()則打開pop展示。
?? ??? ??? ??? ?this.$refs.cityPhonePop.open()
?? ??? ??? ?},三、pop組件，擴展詳情說明
1.pop位置，可以布局中設(shè)置type，同時可以打開pop的時候參數(shù)中傳入位置。
// 通過組件定義的ref調(diào)用uni-popup方法 ,如果傳入?yún)?shù) ，type 屬性將失效 ，僅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')2. 設(shè)置主窗口背景色
大多數(shù)場景下，并不需要設(shè)置 background-color 屬性,
而也有特例，需要我們主動去設(shè)置背景色，例如 type = 'bottom' 的時候 ，在異型屏中遇到了底部安全區(qū)問題（如 iphone 11），因為 uni-popup的主要內(nèi)容避開了安全區(qū)（設(shè)置safe-area:true），導(dǎo)致底部的顏色我們無法自定義，這時候使用 background-color 就可以解決這個問題。
<button @click="open">打開彈窗</button> <uni-popup ref="popup" type="bottom" background-color="#fff">底部彈出 Popup</uni-popup>
3.禁用打開動畫
在某些場景 ，可能不希望彈層有動畫效果 ，只需要將 animation 屬性設(shè)置為 false 即可以關(guān)閉動畫。
<button @click="open">打開彈窗</button> <uni-popup ref="popup" type="center" :animation="false">中間彈出 Popup</uni-popup>
4.禁用點擊遮罩關(guān)閉
默認(rèn)情況下，點擊遮罩會自動關(guān)閉uni-popup，如不想點擊關(guān)閉，只需將mask-click設(shè)置為false，這時候要關(guān)閉uni-popup，只能手動調(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Js+Ajax,Get和Post在使用上的區(qū)別小結(jié)
下面小編就為大家?guī)硪黄狫s+Ajax,Get和Post在使用上的區(qū)別小結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
使用 JScript 創(chuàng)建 .exe 或 .dll 文件的方法
JScript 是由微軟開發(fā)的活動腳本語言，基于 ECMAScript 規(guī)范實現(xiàn)。Internet Explorer 中的 JavaScript，實際上是指 JScript。2011-07-07
其實，沒那么強大的，不過，聊勝于無吧，并且還算管用，要是有誰再完善它就好了……2009-04-04
這篇文章主要給大家介紹了關(guān)于uniapp調(diào)用手機相機進行拍照的兩種方式,在uniapp中有多種方式可以調(diào)用相機進行拍照,文中介紹了兩種方法,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于如何手動實現(xiàn)es5中的bind方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Bootstrap列表組的學(xué)習(xí)使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JS+CSS實現(xiàn)可拖拽的漂亮圓角特效彈出層完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)可拖拽的漂亮圓角特效彈出層,以完整實例形式分析了彈出層特效及圓角矩形的實現(xiàn)技巧,需要的朋友可以參考下2015-02-02
javascript刪除一個html元素節(jié)點的方法
這篇文章主要介紹了javascript刪除一個html元素節(jié)點的方法,可通過獲取父節(jié)點再查找并刪除子節(jié)點來實現(xiàn)該功能,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法,以實例形式較為詳細(xì)的分析了html及css頁面布局與js特效的實現(xiàn)方法,是非常實用的技巧,需要的朋友可以參考下2015-01-01