uni-app 弹窗

原创已于 2022-03-24 18:02:06 修改 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架

于 2022-03-24 18:01:23 首次发布

uniapp 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在uni-app中如何通过简单的方式实现弹窗功能，绕过官方popup组件存在的问题。方法是通过在A页面上跳转到半透明的B页面来达到覆盖效果。B页面需设置导航栏为隐藏，利用透明背景和淡入动画实现弹窗视觉。点击B页面关闭弹窗并返回A页面。这种方式避免了官方文档中popup组件的某些已知问题。

弹窗，在我们实际开发场景中是非常常用的，而uniapp的弹窗，虽然官方文档中也讲了到了一些实现方式，在官方文档中运用的是popup 子窗体，但是实际上使用的时候，有些问题也是莫名其妙的出现，而且这些问题居然还是很久以前就出现过了，但是并没有修复。所以下面讲个非常简单的实现方式。

上面这种弹窗实现方式很简单，原理就是在a页面上面跳转b页面，而b页面半透明覆盖a页面，

我们需要给b页面设置导航栏为隐藏

{
    "path": "pages/B页/B页",
    "style": {
        //取消原生导航栏
        "navigationStyle": "custom",
        "backgroundColor": "transparent",
        "app-plus": {
            "animationType": "fade-in",
            "background": "transparent",
            "popGesture": "none"
        }
    }
}

正常创建a页面与b页面，只不过要给b页面设置导航栏隐藏

a页面

<template>
    <view class="content">
        <button @click="showPopup" type="primary">show popup</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        onLoad() {

        },
        methods: {
            showPopup() {
                
                uni.navigateTo({
                    url: 'pages/B页/B页'
                })
              
            }
        }
    }
</script>

<style>

</style>

b页面

<template>
    <view @click="close" class="mask">
     
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
           
            //关闭退出B页
            close() {
                uni.navigateBack()
            }
        }
    }
</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);
    }

   
</style>

这就是最简单的例子，原文地址在 uni-app 在APP端如何覆盖原生导航栏