uniapp 「小程序」考勤系统的日历组件

由于是用uniapp写的，所以在网页上也可以用，先上预览图

主要功能：

• 点击选中样式
• 滑动跳转月份
• 点击非本月日期跳转相应月份

一、css部分

css样式原理如下，红色框为用户视图。拖拉的时候改变left数值就可以了。

小tips：
当宽度为自适应，不知道具体数值，而需要用宽度计算时，可以用padding-bottom。这样我们就可以一行放下七个圆形了。

.day-item{
   
			width: 14%;
			display: block;
			border-radius: 50%;
			padding-bottom: 100%;
			height: 0;
		}

所有css如下：
数字偏上是预留位置给当天的状态显示。

<style lang="scss">
.calendar{
     
		width: 92%;
		margin: 15px auto;
		background-color: #fff;
		border-radius:16px;
		padding: 30rpx 20rpx;
		overflow: hidden;

        .threeMonth{
     
			display: flex;
			width: 300%;
			position: relative;
		}
		
		.title{
     
			font-size: 35rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}
		
		.day{
     
			display: flex;
			position: relative;
			width: 100%;
			justify-content: space-around;
			flex-wrap: wrap;
			text-align: center;
			align-content: flex-start;
			
			.active{
     
				background-color: #1972F0;
				color: #fff;
			}
		}

		
		.day-item{
     
			width: 14%;
			text{
     
				display: block;
				border-radius: 50%;
				width: 100%;
				padding-top: calc(50% - 1em);
				padding-bottom: calc(50% + 1em);
				height: 0;
			}
		}

}
</style>

二、template部分

<view class="calendar">
	<view class="day">
	  <view class="day-item" v-for="(item,index) in ['日','一','二','三','四','五','六']">
	      {
  {item}}
	  </view>
	</view>

	<!-- 日期 -->
	<view 
		class="threeMonth"    
		@touchstart='touchstart