uniapp日期横向滚动自定义组件

	<view class="scrollWeek">
		<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll" scroll-left="0">
			<view class="scroll-view_H">
				<view @click="clickTap('')" :class="activeTab == ''?'active':''" class="scroll-view-item_H uni-bg-red">
					<view class="">
						全部
					</view>
					<view class="time ">24场</view>

				</view>
				<view @click="clickTap(i+1)" :class="activeTab == i+1?'active':''" class="scroll-view-item_H uni-bg-red"
					v-for="(item,i) in weekList" :key="i">
					<view class="">
						{{item.week}}
					</view>
					<view class="time">{{item.time}}</view>

				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		name:'scrollWeek',
		data() {
			return {
				activeTab: '',
				weekList: [],
				value: '',
				nav_title: '首页',
				// 是否包含状态栏
				status_bar: true,
				
			}
		},
		mounted() {
			this.getTime()
			this.weekList = this.getcycle(9)

		},
		methods: {
			// 点击tap
			clickTap(i) {
				this.activeTab = i
			},
			// 滚动函数
			scroll() {},
			// 获取几天内的星期及日期
			getcycle(cycle) {
				var arr = [this.getnewDay()];
				for (let i = 0; i <= cycle; i++) {
					arr.push(this.findDate(i + 1));
				}
				return arr
			},
			// 获取当前日期的时间和日期
			getnewDay() {

				var date1 = new Date(),
					time = this.Twodigits(date1.getMonth() + 1) + "-" + this.Twodigits(date1
						.getDate()); //time1代表当前时间
				return {
					week: '今天',
					time
				}
			},
			// 获得对应日期的星期
			getTime(date) {
				// console.log(date)
				var date1 = new Date()
				var myDate = new Date(date1.getFullYear() + "-" + date);
				// console.log(myDate)
				var days = myDate.getDay();
				// console.log(days)
				switch (days) {
					case 1:
						days = '周一';
						break;
					case 2:
						days = '周二';
						break;
					case 3:
						days = '周三';
						break;
					case 4:
						days = '周四';
						break;
					case 5:
						days = '周五';
						break;
					case 6:
						days = '周六';
						break;
					case 0:
						days = '周日';
						break;
				}
				return days
			},
			// 日期补零
			Twodigits(num) {
				return num < 10 ? '0' + num : num;
			},
			// 日期获取
			findDate(e) {
				var date1 = new Date(),
					time = date1.getFullYear() + "-" + this.Twodigits(date1.getMonth() + 1) + "-" + this.Twodigits(date1
						.getDate()); //time1代表当前时间
				var date2 = new Date(date1);
				date2.setDate(date1.getDate() + e);
				var time2 = this.Twodigits(date2.getMonth() + 1) + "-" + this.Twodigits(date2
					.getDate()); //time2指的是e天后时间
				let weep = this.getTime(time2)
				return {
					'week': weep,
					'time': time2
				};
			},
			// 跳转车队详情
			goAddcar(item) {
				console.log('sss')
				uni.navigateTo({
					url: '../addCar/addCar'
				})
			},
			// 跳转车队详情
			goDetails(item) {
				console.log('sss')
				uni.navigateTo({
					url: '../fleetDetails/index?id=' + item.name
				})
			},
			// 点击导航栏左侧
			clickNavLeft() {
				uni.showToast({
					title: '点击导航栏左侧',
					duration: 1500,
					icon: 'none'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.scrollWeek {


		.content {}

		.home-flex {
			display: flex;
			padding: 10px;
			padding-bottom: 0;

			.home-icon {
				width: calc(50% - 5px);

				image {
					width: 100%;
					height: 190rpx;
				}
			}
		}

		.dropdownFilter {
			height: 53px;
			width: 100%;
		}

		.add_car {
			position: fixed;
			bottom: 33px;
			right: 18px;
			width: 108rpx;
			height: 110rpx;
		}

		/deep/.uni-navbar__header-btns-left {
			width: 40rpx !important;
		}

		.scroll-view {
			border-bottom: 1px solid #ddd;
			margin: 10rpx 0;
			background-color: #fff;
			padding-top: 20rpx;
		}

		.scroll-view_H {
			display: flex;

			.scroll-view-item_H {
				margin: 0 20rpx;
				flex: 0 0 80rpx;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.time {
					color: #b3b3b3;
					font-size: 24rpx;
					margin: 5rpx 0;
				}
			}
		}

		.active {
			border-bottom: 3px solid #333;
			font-weight: bold;

			.time {
				font-weight: 100;

			}
		}
	}
</style>