标签：星期 week 封装 Date let currentDay 组件 new oneDayt

 效果图

<template>
	<view>
		<view class="app">
			<view class="head">
				<view class="cander">
					<view class="week">
						<view :class="currentDay == 1 ?'fontW':'day' ">
							 {{currentDay == 1 ?'今日':'一'}}
						</view>
						<view :class="currentDay == 1 ?'bgColor':'num' ">
							{{week.Mon}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay ==2 ?'fontW':'day' ">
						 {{currentDay == 2 ?'今日':'二'}}
						</view>
						<view :class="currentDay == 2 ?'bgColor':'num' ">
							{{week.Tues}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 3 ?'fontW':'day' ">
						 {{currentDay == 3 ?'今日':'三'}}
						</view>
						<view :class="currentDay == 3 ?'bgColor':'num' ">
							{{week.Wed}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 4 ?'fontW':'day' ">
							{{currentDay == 4 ?'今日':'四'}}
						</view>
						<view :class="currentDay == 4 ?'bgColor':'num' ">
							{{week.Thur}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 5 ?'fontW':'day' ">
							{{currentDay == 5 ?'今日':'五'}}
						</view>
						<view :class="currentDay == 5 ?'bgColor':'num' ">
							{{week.Fri}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 6 ?'fontW':'day' ">
							{{currentDay == 6?'今日':'六'}}
						</view>
						<view :class="currentDay == 6 ?'bgColor':'num' ">
							{{week.Sat}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 7 ?'fontW':'day' ">
							{{currentDay == 7 ?'今日':'日'}}
						</view>
						<view :class="currentDay == 7 ?'bgColor':'num' ">
							{{week.Sun}}
						</view>
					</view>
				</view>
			</view>
		</view>
		  
	</view>
</template>

<script>
	var that 
	export default {
		data() {
			return {
				currentDay:0,
				week:{},
				tabbar:tabbar,
				currentList:1,
			}
		},
		onLoad() {
			that = this
		},
		onShow() {
			let date = new Date()
			let t = date.getTime()
			let d = date.getDay()
			if(d == 0){
				d = 7
			}
			that.currentDay = d
			let oneDayt = 24*60*60*1000
			console.log(t,d)
			let Mon = new Date(t -(oneDayt * (d-1))).getDate()
			let Tues = new Date(t -(oneDayt * (d-2))).getDate()
			let Wed = new Date(t -(oneDayt * (d-3))).getDate()
			let Thur = new Date(t -(oneDayt * (d-4))).getDate()
			let Fri = new Date(t -(oneDayt * (d-5))).getDate()
			let Sat = new Date(t -(oneDayt * (d-6))).getDate()
			let Sun = new Date(t -(oneDayt * (d-7))).getDate()
			that.week = {Mon ,Tues ,Wed,Thur ,Fri ,Sat ,Sun}
 
		}
	}
</script>

<style lang="scss">
	
	
	.head {
		padding: 20rpx 0;
		border: 1px solid;
		box-shadow: 0 9rpx 8rpx -2rpx rgba(0,0,0,0.2);
		.cander {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			.week {
				text-align: center;
				
				.fontW {
					font-weight: 700;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				.day {
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				.num {
					border: 1px solid;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
				}
				.bgColor {
					background-color: $main;
					border: 1px solid;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
					color: $white;
				}
			}
		}
	}
</style>

标签：星期,week,封装,Date,let,currentDay,组件,new,oneDayt
来源： https://blog.csdn.net/yy6818/article/details/121183411

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。