uni-app页面导航栏透明背景
<p>效果:</p><p> </p>
<p><img src="https://img2020.cnblogs.com/blog/1739255/202101/1739255-20210116144522124-280454709.png"></p>
<p> </p>
<p>代码:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">// pages.json ,需要的页面添加 <br>{
</span>"path": "pages/ServiceHome/ServiceHome"<span style="color: rgba(0, 0, 0, 1)">,
</span>"style"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"navigationBarTitleText": "uni-app"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarBackgroundColor": "transparent"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTextStyle": "white"<span style="color: rgba(0, 0, 0, 1)">,
</span>"app-plus"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"titleNView"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"type": "float"<span style="color: rgba(0, 0, 0, 1)">,
</span>"titleText": "uni-app"<span style="color: rgba(0, 0, 0, 1)">
}
}
}
},</span></pre>
</div>
<div class="cnblogs_code">
<pre><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><span style="color: rgba(0, 0, 0, 1)">
.home</span>-<span style="color: rgba(0, 0, 0, 1)">container{
min</span>-<span style="color: rgba(0, 0, 0, 1)">height: 100vh;
.home</span>-<span style="color: rgba(0, 0, 0, 1)">top{
position: relative;
width: 100vw;
height: 500rpx;
background</span>-<span style="color: rgba(0, 0, 0, 1)">color: #007AFF;
.bg{
position: absolute;
top: </span>0<span style="color: rgba(0, 0, 0, 1)">;
left: </span>0<span style="color: rgba(0, 0, 0, 1)">;
width: </span>100%<span style="color: rgba(0, 0, 0, 1)">;
height: </span>100%<span style="color: rgba(0, 0, 0, 1)">;
}
}
}
</span></style></pre>
</div>
<p> 2021.2.15更,以上方法iOS机型没问题,Android不生效</p>
<p>改如下即可</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"> {
</span>"path": "pages/PersonCenter/Login"<span style="color: rgba(0, 0, 0, 1)">,
</span>"style"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"navigationBarBackgroundColor": "transparent"<span style="color: rgba(0, 0, 0, 1)">,
</span>"navigationBarTextStyle": "white"<span style="color: rgba(0, 0, 0, 1)">,
</span>"app-plus"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"titleNView": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
}
}
},</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/Console-LIJIE/p/14285948.html
頁:
[1]