欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp中uni-popup的具體使用

 更新時間：2023年06月25日 10:05:18   作者：棒怡情  
本文主要介紹了uniapp中uni-popup的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

uni-pop彈出層組件，在應用中彈出一個消息提示窗口、提示框等,可以設置彈出層的位置，是中間、底部、還是頂部。

如下圖效果所示：白色區(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位置，可以布局中設置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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關文章

最新評論