uni-app项目实战笔记14--给全屏页面添加遮罩层

接着上一篇，给全屏页面加上遮罩层，先来看效果：

从图片上看，遮罩分上下两层：

1.上层显示计数，时间和日期；

2.下层显示信息，评分和下载。

模板层代码：

<template>
	<view class="preview">
		<swiper circular>
			<swiper-item  v-for="item in 5">
				<image @click="maskChange" src="/common/images/preview1.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="mask" v-if="maskState">
			<view class="goBack"></view>
			<view class="count">3 / 9</view>
			<view class="time">
				<uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="date">
				<uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box">
					<uni-icons type="info" size="28"></uni-icons>
					<view class="text">信息</view>
				</view>
				<view class="box">
					<uni-icons type="star" size="28"></uni-icons>
					<view class="text">5分</view>
				</view>
				<view class="box">
					<uni-icons type="download" size="23"></uni-icons>
					<view class="text">下载</view>
				</view>
			</view>
		</view>
	</view>
</template>

知识要点：

1.引入uniapp时间格式化组件，对时间和日期进行格式化显示：‘

<view class="time">
	<uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
</view>
<view class="date">
	<uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
</view>

2.定义maskChange点击事件控制遮罩层的显示与隐藏。

<script setup>
	import {ref} from "vue"
	const maskState = ref(true)
	function maskChange(){
		maskState.value = !maskState.value
	}
</script>

CSS代码

<style lang="scss" scoped>
	  .preview{
		  width: 100%;
		  height: 100vh;
		  position: relative;
		  swiper{
			  width: 100%;
			  height: 100%;
			  image{
				  width: 100%;
				  height: 100%;
			  }
		  }
		  .mask{
			  &>view{
				   position: absolute;
				   left: 0;
				   margin: auto;
				   right: 0;
				   color: #fff;
				   width: fit-content;
			  }
			  .goBack{
				  
			  }
			  .count{
				  top:10vh;
				  background: rgba(0,0,0,0.3);
				  font-size: 28rpx;
				  border-radius: 40rpx;
				  padding: 8rpx 28rpx;
				  backdrop-filter: blur(10rpx);
			  }
			  .time{
				   font-size: 140rpx;
				   top:calc(10vh + 80rpx);
				   font-weight: 100;
				   line-height: 1em;
				   text-shadow: 0 4rpx rgba(0,0,0,0.3);
			  }
			  .date{
				  font-size: 34rpx;
				  top:calc(10vh + 230rpx);
				  text-shadow: 0 2rpx rgba(0,0,0,0.3);
			  }
			  .footer{
				  background: rgba(255,255,255,0.8);
				  bottom:10vh;
				  width: 65vw;
				  height: 120rpx;
				  border-radius: 120rpx;
				  color:#000;
				  display: flex;
				  justify-content: space-around;
				  align-items: center;
				  box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
				  backdrop-filter: blur(20rpx);
				  .box{
					  display: flex;
					  flex-direction: column;
					  align-items: center;
					  justify-content: center;
					  padding: 2rpx 12rpx;
					  .text{
						  font-size: 20rpx;
						  color: $text-font-color-2;
					  }
				  }
			  }
		  }
	  }     
</style>

知识要点：

1. 遮罩层通用样式

.mask > view {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;  // 水平居中
  width: fit-content; // 宽度适应内容
  color: #fff;  // 默认白色文字
}

• 作用：所有mask的直接子 view 元素（.goBack, .count, .time, .date, .footer）共用绝对定位和居中逻辑，使用.mask > view{}来声明通用样式

• 例外：.footer 单独覆盖了部分样式（如颜色、定位）。

2. 顶部计数指示器 (.count)

.count {
  top: 10vh;  // 距顶部10%视口高度
  background: rgba(0,0,0,0.3); // 半透明黑底
  border-radius: 40rpx;  // 胶囊形状
  backdrop-filter: blur(10rpx); // 磨砂效果
 
}

3. 时间与日期 (.time & .date)

.time {
  font-size: 140rpx;  // 超大字号
  top: calc(10vh + 80rpx); // 位于计数下方
  font-weight: 100;   // 细体字
  text-shadow: 0 4rpx rgba(0,0,0,0.3); // 文字投影
}

.date {
  font-size: 34rpx;
  top: calc(10vh + 230rpx); // 时间下方
  text-shadow: 0 2rpx rgba(0,0,0,0.3);
}

4. 底部操作栏 (.footer)

.footer {
  bottom: 10vh;  // 距底部10%视口高度
  width: 65vw;   // 宽度65%视口
  height: 120rpx;
  background: rgba(255,255,255,0.8); // 半透明白底
  border-radius: 120rpx; // 圆形
  backdrop-filter: blur(20rpx); // 强模糊

  
  .box {
    // 每个操作项垂直居中排列图标和文字
  }
}