怎么使用uniapp自定義彈框

這篇文章主要講解了“怎么使用uniapp自定義彈框”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用uniapp自定義彈框”吧！

效果原理

利用透明頁面，點擊進(jìn)入當(dāng)前頁面，內(nèi)容根據(jù)自己需求去實現(xiàn)，隨便自定義，出來的效果就是一個彈框的效果。解決的難題(原生tabbar中間按鈕的彈框，升級彈框不能遮擋原生tabbar)

創(chuàng)建一個vue頁面

<template>
    <view @click="close()" class="mask">
        <view class="content">
            <view class="" @click.stop="doScanCode">點擊掃碼</view>
            <view class="" @click.stop="doDialog">點擊彈出</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            close() {
                uni.navigateBack()
            },
            doDialog() {
                uni.showModal({
                    title:'uniapp彈框'
                })
            },
            doScanCode() {
                uni.scanCode({
                    success: function(res) {
                        console.log('條碼類型：' + res.scanType);
                        console.log('條碼內(nèi)容：' + res.result);
                        uni.navigateTo({
                            url:'../scancode/scancode'
                        })
                    }
                });
            }
        }
    }
</script>

<style>
    page {
        background: transparent;
    }
    
    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
    }
    
    .content {
        width: 200px;
        height: 200px;
        background-color: #007AFF;
        /* margin-bottom: 140upx; */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

pages.json配置

{// 點擊tabbar中間的按鈕進(jìn)入此頁面，設(shè)置為透明的，當(dāng)做一個彈框，
"path": "pages/midDialog/midDialog",
    "style": {
        "background": "transparent",
        "app-plus": {
            "titleNView": false
        }
    }

}

一般tabbar中間按鈕點擊出現(xiàn)彈框

// 這些是要寫在App.vue中onLaunch里邊
uni.onTabBarMidButtonTap(() => {
    uni.navigateTo({
        url: '/pages/midDialog/midDialog',
        animationType: 'fade-in',
        animationDuration: 200,
        fail(err) {
            console.log(err)
        }
    });
})

注意事項

在真機運行下測試，在模擬器中，由于模擬器性能不完善，導(dǎo)致透明效果有時會失敗，反正app最后都是運行在手機上，何不直接用真機運行呢

感謝各位的閱讀，以上就是“怎么使用uniapp自定義彈框”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么使用uniapp自定義彈框這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！