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

Posted 2022-12-09 zhuangwei_8256

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>