uniapp 之 如何编写透明页面（类似与nvue页面，可以盖住原生组件如底部tabbar）

话不多说，先看效果

• 真机效果
  
• H5 效果：
  

 

上代码

• pages.json

{
    
    
	"path": "pages/nav/nav-sidebar",
	"style": {
    
    
		"navigationBarTitleText": "透明页面demo", // 这里加上titleText是为了方便以后好找对应的page
		"disableScroll": true, // 设置为 true 则页面整体不能上下滚动（bounce效果）
		"navigationStyle": "custom", // 原生导航栏不显示，这个与app-plus中的titleNView 取其中一个就行，只是为了不显示原生导航栏而已
		"app-plus": {
    
    
		  "backgroundColorTop": "transparent", // 窗口顶部背景颜色值
		  "background": "transparent", // 这个属性必须，窗体背景色。无论vue页面还是nvue页面，在App上都有一个父级原生窗体，该窗体的背景色生效时间快于页面里的css生效时间
		  // "titleNView": false // false 原生导航栏不显示
		  "scrollIndicator": false, // 窗口是否显示滚动条
		  "popGesture": "none", // 窗口的侧滑返回功能
		  "animationType": "fade-in", // 窗口显示的动画效果
		  "animationDuration": 200 // 窗口显示动画的持续时间
		}
	}
},

• nav-sidebar.vue

<template>
	<view class="content">
		<!-- 页面遮罩层 -->
		<view class="modal" style="z-index: -1" @click.stop="uni.navigateBack()"></view>
		
		<!-- 页面内容 -->
		<view class="page-content">
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
			页面 - 发图文
		</view>
	</view>
</template>

<style>
	page {
    
    
		/* 必须的样式，这是页面背景色为透明色 */
		background: transparent; 
	}
</style>

<style scoped lang="scss">
	.content {
    
    
		// 这个样式是给页面增加一个灰度的透明遮罩层
		.modal {
    
    
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.25);
		}
		
		.page-content {
    
    
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 172rpx; // 因为这里实现的是导航侧边栏的效果，所以给的右定位距离，如果是希望底部或者其他方向的相应的调整就行 
			background: #fff;
			padding-top: var(--status-bar-height); // 这个样式只是给顶部增加一个手机状态栏的高度，避免页面内容和手机状态栏重叠
		}
	}
</style>

• 注意：

• 相关的一些必须样式，以及说明都已在代码中体现了；
• 另外有个说明的点，这个页面在H5端的显示与app略显不同，查看效果图，所以这里的需要真机进行测试哈；如果需要两端兼容的可以做下条件编译，H5端实现较为简单在此就不多做演示了。

 

文档说明

• pages.json里面的动画设置，详情查看官方文档
  

• pages.json 里面的 app-plus中的配置，查看官方文档
  

• 手机状态栏的问题，可查看另一篇文章记录uniapp提供的css变量
  uniapp 之 获取底部安全距离，状态栏高度等

 
 
 

如有不足，望大家多多指点！ 谢谢！