uni-app页面导航栏透明背景

百灵儿

效果:

 

 

代码:

// pages.json ,需要的页面添加 
{
            "path": "pages/ServiceHome/ServiceHome",
            "style": {
                "navigationBarTitleText": "uni-app",
                "navigationBarBackgroundColor": "transparent",
                "navigationBarTextStyle": "white",
                "app-plus": {
                    "titleNView": {
                        "type": "float",
                        "titleText": "uni-app"
                    }
                }
            }
        },

<template>
    <view class="home-container">
        <view class="home-top">
            <image class="bg" src="../../static/icon/bg.jpeg"></image>
        </view>
    </view>
</template>

<script>
</script>

<style lang="scss" scoped>
    .home-container{
        min-height: 100vh;
        .home-top{
            position: relative;
            width: 100vw;
            height: 500rpx;
            background-color: #007AFF;
            .bg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

 2021.2.15更,以上方法iOS机型没问题,Android不生效

改如下即可

        {
           "path": "pages/PersonCenter/Login",
           "style": {
            "navigationBarBackgroundColor": "transparent",
            "navigationBarTextStyle": "white",
            "app-plus": {
                "titleNView": false
            }
          }
        },

 

来源：https://www.cnblogs.com/Console-LIJIE/p/14285948.html