手机端自定义导航栏、导航栏占位的写法

最新推荐文章于 2024-11-16 18:22:10 发布

桃花岛主70

最新推荐文章于 2024-11-16 18:22:10 发布

阅读量104

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_18089765/article/details/142106938

版权

<!-- 状态栏占位 -->
	<view :style="'height:' + statusBarHeight + 'px;'" style="position: fixed; z-index: 2999;" class="w-100 bg-white"></view>
	<!-- 自定义的导航栏 -->
	<view :style="'top:' +statusBarHeight + 'px;'" class="custom-navbar">  
	    <text class="navbar-title">视频制作</text>  
	    <button class="custom-button" @click="handleCombile">合成</button>  
	</view>
	<view :style="'height:' + marginTop +'px;'">
		
	</view>

样式：

.custom-navbar {  
	  display: flex;  
	  justify-content: space-between;  
	  align-items: center;  
	  padding: 10rpx 20rpx; /* 根据需要调整 */  
	  background-color: #007AFF;  
	  color: white;  
	  position: fixed;  
	  
	  left: 0;  
	  right: 0;  
	  z-index: 2999;  
	   box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */  
	}  
.navbar-title {  
	  font-size: 36rpx; /* 设置字体大小 */  
	  font-weight: bold; /* 加粗字体 */  
	  letter-spacing: 1px; /* 字母间距 */  
	  /* 如果需要，还可以添加文本阴影等效果 */  
	}
	.custom-button {  
		margin-right: 20px; 
	  padding: 0 30rpx; /* 设置内边距 */  
	    font-size: 32rpx; /* 设置字体大小 */  
	    border: none; /* 去除边框 */  
	    border-radius: 8rpx; /* 设置边框圆角 */  
	    background-color: #FF5722; /* 设置背景色 */  
	    color: white; /* 设置文字颜色 */  
	    outline: none; /* 去除点击时的轮廓 */  
	    transition: background-color 0.3s; /* 过渡效果 */    
	}  
	.custom-button:active {  
	  background-color: #E64A19; /* 点击时的背景色变化 */  
	  transform: translateY(2px); /* 点击时轻微下移，增加点击反馈 */  
	}