uni-app沉浸式透明导航栏

Bertha 。 2023-01-15 08:07 1526阅读 0赞

##### 第一步：`pages.json`，配置以下代码： #####

{
    	"pages": [
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "沉浸式透明导航栏",
    				"navigationStyle": "custom", // 取消本页面的导航栏
    				"app-plus": {
    					"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型
    					"background": "transparent", // 背景透明
    					"backgroundColor": "rgba(0,0,0,0)", // 背景透明
    					"webviewBGTransparent": true,
    					"mask": "none",
    					"opacity": 0.9,
    					"popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
    				}
    			}
    		}
    	]
    }

##### 第二步：这时候设置了沉浸式透明导航的页面中，返回按钮和标题隐藏了，所以我们需要写一个自定义的导航栏： #####

pages/index/index.vue
    
    <template>
    	<view class="uni-seleton">
    		<view class="back-btn iconfont iconarrow_btn_left" @click="navBack">
    			<text class="nav-title">标题</text>
    		</view>
    	</view>
    </template>
    
    export default {
    	methods: {
    			// 返回上一页
    			navBack() {
    				uni.navigateBack();
    			}
    	}
    }
    
    <style lang='scss'>
    	.back-btn {
    		width: 100%;
    		position: absolute;
    		z-index: 999;
    		padding-top: var(--status-bar-height);
    		padding-left: 40upx;
    		padding-right: 40upx;
    		top: 40upx;
    		font-size: 40upx;
    		color: #1E1E1E;
    		display: flex;
    		align-items: center;
    		.nav-title {
    			width: 590upx;
    			text-align: center;
    		}
    	}
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，1526人围观）

还没有评论，来说两句吧...

相关阅读

相关导航栏渐变透明

下载地址[Demo下载][Demo] 导航栏渐变透明 - (void)viewDidLoad { [super viewDidLoad];

刺骨的言语ヽ痛彻心扉/ 2023年10月17日 08:48/ 0 赞/ 152 阅读

相关 uni-app沉浸式透明导航栏

第一步：`pages.json`，配置以下代码： { "pages": [ { "path": "pages/index/in

Bertha 。/ 2023年01月15日 08:07/ 0 赞/ 1527 阅读

相关 android 导航栏半透明,Android 沉浸式/透明式状态栏、导航栏

前言 Android 从4.4开始引进透明状态栏和导航栏的概念，并且在5.0进行了改进，将透明变成了半透明的效果。虽然此特性最早出现在ios，但不否认效果还是很赞的。至于

曾经终败给现在/ 2022年10月16日 07:38/ 0 赞/ 314 阅读

相关透明状态栏（沉浸式状态栏）

透明状态栏（沉浸式状态栏）透明状态栏（Translucate StatusBar）是android从4.4开始模仿ios推出的一种模式，他可以改变状态栏的颜色，

迷南。/ 2022年08月20日 02:20/ 0 赞/ 306 阅读

相关 Android 沉浸式状态栏与隐藏导航栏

1 前言一般我们在Android的APP开发中，APP的界面如下： ![这里写图片描述][SouthEast] 可以看到，有状态栏、ActionBar(Tool

落日映苍穹つ/ 2022年05月20日 01:41/ 0 赞/ 418 阅读

相关 Android 沉浸式状态栏与隐藏导航栏

1 前言一般我们在Android的APP开发中，APP的界面如下： ![这里写图片描述][SouthEast] 可以看到，有状态栏、ActionBar(Tool

﹏ヽ暗。殇╰゛Y/ 2022年05月12日 20:50/ 0 赞/ 389 阅读

相关导航栏透明化方案

某些场景需要将导航栏完全透明化，实现这个效果有如下要求全局性，因此考虑分类或者在基类中实现。独立性，即不会影响其他的控制器导航的正常使用。因此考虑在`view

红太狼/ 2022年04月13日 12:20/ 0 赞/ 242 阅读

相关 Android Fragment 实现状态栏透明（沉浸式）

来两张效果图对比一下 ![透明状态栏.png][.png] ![非透明状态栏.png][.png 1] > 第一张图是实现了透明状态栏的效果，第二张图是未实现透明状状

一时失言乱红尘/ 2022年04月02日 08:23/ 0 赞/ 2269 阅读

相关 ionic3沉浸式状态栏及首页变化导航栏

状态栏参考文章：链接: [https://www.jianshu.com/p/1ca5609f69d8][https_www.jianshu.com_p_1ca5609f69d

谁借莪１个温暖的怀抱￠/ 2022年01月17日 01:57/ 0 赞/ 456 阅读

相关 uniapp 导航栏tabBar

注意: (1)当设置导航栏在顶部,即position为top时,只能配置文字,不能配置图标 (2)当设置导航栏在顶部时,仅微信有效 (3)图标不

超、凢脫俗/ 2021年07月24日 23:15/ 0 赞/ 827 阅读