uniapp横向滚动示例

<view class="topDate">
	<view class="viewScroll">
		<view class="allDate" :class="[active == 0?'active':'']" @click="clickDate(0)">
			<view>全部</view>
			<view>日期</view>
		</view>
		<view class="scrollItem" :class="[active == item.id?'active':'']" v-for="(item,index) in dateList" :key="index" @click="clickDate(item.id)">
			<view class="item-week">{{item.week}}</view>
			<view class="item-date">{{item.date}}</view>
			<view class="item-descr">{{item.descr}}</view>
		</view>
	</view>
</view>

active: 0, // 控制选中日期样式
// 日期数据（这里用到的时间插件是moment，详细使用方法可以看主页-前端时间插件moment的使用）
dateList: [{
	id: 1,
	week: this.getWeek(moment().format("MM-DD")),
	date: moment().format("MM-DD"),
	descr: '有号',
}, {
	id: 2,
	week: this.getWeek(moment().add(1, 'days').format('MM-DD')),
	date: moment().add(1, 'days').format('MM-DD'),
	descr: '有号',
}, {
	id: 3,
	week: this.getWeek(moment().add(2, 'days').format('MM-DD')),
	date: moment().add(2, 'days').format('MM-DD'),
	descr: '有号',
}, {
	id: 4,
	week: this.getWeek(moment().add(3, 'days').format('MM-DD')),
	date: moment().add(3, 'days').format('MM-DD'),
	descr: '有号',
}, {
	id: 5,
	week: this.getWeek(moment().add(4, 'days').format('MM-DD')),
	date: moment().add(4, 'days').format('MM-DD'),
	descr: '有号',
}, {
	id: 6,
	week: this.getWeek(moment().add(5, 'days').format('MM-DD')),
	date: moment().add(5, 'days').format('MM-DD'),
	descr: '有号'
}, {
	id: 7,
	week: this.getWeek(moment().add(6, 'days').format('MM-DD')),
	date: moment().add(6, 'days').format('MM-DD'),
	descr: '有号'
}],

//获取星期几
getWeek(date) {
	const week = moment(date).day();
	switch (week) {
		case 1:
			return '周一';
		case 2:
			return '周二';
		case 3:
			return '周三';
		case 4:
			return '周四';
		case 5:
			return '周五';
		case 6:
			return '周六';
		case 0:
			return '周日';
	}
},
clickDate(id) {
	this.active = id
},

::-webkit-scrollbar { //隐藏滚动条
	display: none;
}
.topDate {
	display: flex;
	align-items: center;
	height: 200rpx;
	background-color: #fff;
	
	.viewScroll {
		display: flex;
		overflow-x: scroll;
		display: -webkit-box;
		
		.allDate {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0 10rpx;
			width: 140rpx;
			height: 140rpx;
			background-color: #f5f5f7;
			border-radius: 16rpx;
			font-size: 30rpx;
			box-sizing: border-box;
		}

		.active {
			background-color: #f2f5fe;
			border: 1px solid #6277dc;
			color: #6277dc;
		}

		.scrollItem {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 10rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 16rpx;
			background-color: #f5f5f7;
			box-sizing: border-box;
			
			.item-week {
				font-size: 26rpx;
			}
			
			.item-date {
				font-size: 30rpx;
				font-weight: bold;
			}
			
			.item-descr {
				font-size: 24rpx;
			}
		}
	}
}

效果演示

uniapp横向滚动