uni-app截取上个月到本月当天天数

最新推荐文章于 2024-01-03 21:37:56 发布

四岁半儿

最新推荐文章于 2024-01-03 21:37:56 发布

阅读量2k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45423865/article/details/107157184

版权

<scroll-view class="scroll-view_H" :scroll-left="scrollLeft" scroll-x="true" @scroll='scroll'>
	<view class="slide_type_list">
	    //上个月
		<view class="slide_type_list_view">
			<view  v-for="(item,index) in LastMonthList" :key="index" :class="item.isSelected?'is_selected':''" @click="changeDate(item)">
				<view class="tabView">{{item.month}}月{{item.value}}日</view>
			</view>
		</view>
		//当月
		<view  class="slide_type_list_view">
			<view v-for="(item,index) in monthList" :key="index" :class="item.isSelected?'is_selected':''" @click="changeDate(item)">
				<view class="tabView">{{item.month}}月{{item.value}}日</view>
			</view>
		</view>
	</view>
	</scroll-view>

data(){
	scrollLeft:0,//滑动位置
	monthList:[],//当月天数
	LastMonthList:[],//上个月天数
	tabchartTime:'',//切换时间  年月日
	chartTime:new Date().getFullYear(),//当年
}

created() {
	this.getTheMonthList();
	this.scroll();
	this.tabchartTime=new Date().getFullYear() + (new Date().getMonth()+1 < 10 ? '0'+(new Date().getMonth()+1) : new Date().getMonth()+1) + (new Date().getDate()-1 < 10 ? '0'+(new Date().getDate()-1) : new Date().getDate()-1);
},

methods:{
	//日期滑动
	scroll(){
		this.scrollLeft = this.nowDay * 88 + this.lastNowDay * 88
	},
	//获取截止当天当月天数
	getTheMonthList(){
		let nowTime = new Date();
		this.nowDay = nowTime.getDate()-1;
		for(let i = 1;i <= this.nowDay;i++){
			this.monthList.push({
				isSelected:false,
				value:i,
				month:nowTime.getMonth()+1
			});
		}
		this.monthList[this.nowDay - 1].isSelected = true;
		
		if(nowTime.getMonth()===0){
			this.lastMonth = 12;
		}else{
			this.lastMonth = nowTime.getMonth();//上个月
		}
		if(nowTime.getMonth()===1){
			this.year = new Date().getFullYear()-1;//上一年
			this.chartTime =  new Date().getFullYear()-1;//上一年
		}else{
			this.year = nowTime.getFullYear();//获取年份
		}
		this.lastNowDay = new Date(this.year,this.lastMonth,0).getDate()
		for(let i = 1;i <= this.lastNowDay;i++){
			this.LastMonthList.push({
				isSelected:false,
				value:i,
				month:this.lastMonth
			});
		}
	},
	//切换当前日
	changeDate(item){
		this.tabchartTime=this.chartTime+String(item.month<10?'0'+item.month:item.month)+String(item.value< 10 ? '0'+item.value : item.value);//切换选中的年月日   为下面接口传参调用
		this.monthList.forEach((value,index) =>{
			this.monthList[index].isSelected = false;
			if(value.value == item.value){
				this.monthList[index].isSelected = true;
			}
		})
		this.LastMonthList.forEach((value,index) =>{
			this.LastMonthList[index].isSelected = false;
			if(value.value == item.value){
				this.LastMonthList[index].isSelected = true;
			}
		})
	},
}

/* 横向滑动tab */
.scroll-view_H {
	background-color: #FFFFFF;
	.slide_type_list {
		display: flex;
		padding: 20upx 30upx;
		.slide_type_list_view {
			display: flex;
			padding-bottom: 10upx;
			font-size: 28upx;
			color: #83839f;
			text-align: center;
			.tabView {
				// margin-right: 30upx;
				width: 120upx;
				text-align: center;
			}
		}
		.tabView:last-child{
			width:150upx;
		}
		.is_selected {
			color: #252529;
			font-weight: bold;
			position: relative;
		}
		.is_selected:before {
			content: '';
			position: absolute;
			width: 62upx;
			height: 4upx;
			left: 50%;
			margin-left: -31upx;
			bottom: -20upx;
			background-color: #2e7af2;
		}
	}
}