uniapp中uni-popup的具體使用

更新時間：2023年06月25日 10:05:18 作者：棒怡情

本文主要介紹了uniapp中uni-popup的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、創(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位置，可以布局中設置type，同時可以打開pop的時候參數(shù)中傳入位置。

 // 通過組件定義的ref調(diào)用uni-popup方法 ,如果傳入?yún)?shù) ，type 屬性將失效 ，僅支持 ['top','left','bottom','right','center']
 this.$refs.popup.open('top')

2. 設置主窗口背景色

大多數(shù)場景下，并不需要設置 background-color 屬性,

而也有特例，需要我們主動去設置背景色，例如 type = 'bottom' 的時候，在異型屏中遇到了底部安全區(qū)問題（如 iphone 11），因為 uni-popup的主要內(nèi)容避開了安全區(qū)（設置safe-area:true），導致底部的顏色我們無法自定義，這時候使用 background-color 就可以解決這個問題。

<button @click="open">打開彈窗</button>
<uni-popup ref="popup" type="bottom" background-color="#fff">底部彈出 Popup</uni-popup>

3.禁用打開動畫

在某些場景，可能不希望彈層有動畫效果，只需要將 animation 屬性設置為 false 即可以關閉動畫。

<button @click="open">打開彈窗</button>
<uni-popup ref="popup" type="center" :animation="false">中間彈出 Popup</uni-popup>

4.禁用點擊遮罩關閉

默認情況下，點擊遮罩會自動關閉uni-popup，如不想點擊關閉，只需將mask-click設置為false，這時候要關閉uni-popup，只能手動調(diào)用 close 方法。

<uni-popup ref="popup" :mask-click="false">
    <text>Popup</text>
    <button @click="close">關閉</button>
</uni-popup>

到此這篇關于uniapp中uni-popup的具體使用的文章就介紹到這了,更多相關uniapp uni-popup內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

uniapp組件uni-popup彈出層的使用

js操作CheckBoxList實現(xiàn)全選/反選(在客服端完成)
對于CheckBoxList控件來說，一方面要實現(xiàn)大量數(shù)據(jù)在服務器端的綁定工作，另一方面往往要求實現(xiàn)全選、反選等功能,接下來將介紹js操作CheckBoxList實現(xiàn)全選/反選，感興趣的朋友可以了解下，或許對你有所幫助
2013-02-02
javascript生成json數(shù)據(jù)簡單示例分享
這篇文章主要介紹了javascript生成json數(shù)據(jù)示例,需要的朋友可以參考下
2014-02-02
JS+CSS實現(xiàn)炫酷光感效果
這篇文章主要為大家詳細介紹了JS+CSS實現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
javascript網(wǎng)頁關鍵字高亮代碼
非常不錯的關鍵字高亮代碼，用js實現(xiàn)，這個方法不錯
2008-07-07
axios如何利用promise無痛刷新token的實現(xiàn)方法
這篇文章主要介紹了axios如何利用promise無痛刷新token的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
js處理php輸出時間戳對不上號的解決方法
JS時間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的，這就是為什么對不上號原因，處理方法如下
2014-06-06
微信小程序時間控件picker view使用詳解
這篇文章主要介紹了微信小程序時間控件picker view的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
JavaScript詳細分析數(shù)據(jù)類型和運算符
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和運算符案例,結(jié)合實例形式分析了JavaScript數(shù)據(jù)類型和運算符特性與相關操作技巧,需要的朋友可以參考下
2022-07-07
JS獲取各種瀏覽器窗口大小的方法
本篇文章主要是對JS 獲取各種瀏覽器窗口大小的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
解決JS內(nèi)存泄露之js對象和dom對象互相引用問題
這篇文章主要介紹了解決JS內(nèi)存泄露之js對象和dom對象互相引用問題,需要的朋友可以參考下
2017-06-06