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

Posted 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>

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

文档说明



如有不足,望大家多多指点! 谢谢!

以上是关于uniapp 之 如何编写透明页面(类似与nvue页面,可以盖住原生组件如底部tabbar)的主要内容,如果未能解决你的问题,请参考以下文章

uniapp聊天页nvue开发踩坑记录

uniapp聊天页nvue开发踩坑记录

uniapp 使用原生子窗体进行视频聊天

uniapp 使用原生子窗体进行视频聊天

如何解决h5、vue、uniapp等项目缓存问题

uni- app 怎么先给一个加载中再显示页面