查看: 15|回覆: 0

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

[複製鏈接]

1

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2009-4-1
發表於 2021-1-16 14:48:00 | 顯示全部樓層 |閲讀模式

效果:

 

 

代码:

// 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
回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部