案例展示

案例代码

已封装成组件使用

<template>
	<view>
		<view class="tabBox">
			<scroll-view scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view class="box">
					<view class="tabItem" v-for="(item,index) in monthList" :key="index"
						:class="{'ac':tabCurrent == index}" @click="tabChange(index)">
						{{item.month}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemWidth: 0, //每个item的宽度
				scrollLeft: 0, //滑动距离
				tabCurrent: 0, //默认当前月份
				sendMonth:'',
				monthList: [{
					id: 1,
					month: '1月'
				}, {
					id: 2,
					month: '2月'
				}, {
					id: 3,
					month: '3月'
				}, {
					id: 4,
					month: '4月'
				}, {
					id: 5,
					month: '5月'
				}, {
					id: 6,
					month: '6月'
				}, {
					id: 7,
					month: '7月'
				}, {
					id: 8,
					month: '8月'
				}, {
					id: 9,
					month: '9月'
				}, {
					id: 10,
					month: '10月'
				}, {
					id: 11,
					month: '11月'
				}, {
					id: 12,
					month: '12月'
				}]
			}
		},
		mounted() {
			// 先获取当前时间的月份
			let date = new Date();
			this.tabCurrent = date.getMonth(); // getMonth()返回的月份从0开始  正好符合tabCurrent  不用再加1了
			this.sendMonth = date.getMonth()+1; // 初次加载，传当前月份

			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tabItem').boundingClientRect(data => {
					// item宽度 = 自身宽度 + 8px右边距
					this.itemWidth = data.width + 8;
					this.scrollLeft = this.itemWidth * (this.tabCurrent - 1);
				}).exec();
			})
		},
		methods: {
			// 点击tab切换高亮，并进行滑动，（index-1）是为了点击项显示在第二栏的位置
			tabChange(index) {
				this.tabCurrent = index;
				// 传参的月份
				this.sendMonth = this.monthList[index].id
				this.scrollLeft = this.itemWidth * (index - 1);
				console.log(this.scrollLeft);
				this.$emit('tabChange',this.sendMonth)
			},
		}
	}
</script>
<style lang="scss">
	.tabBox {
		background: #ffffff;

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		.box {
			width: 1400rpx;
			margin: 0 24rpx;
			display: flex;
			align-items: center;
			height: 90rpx;

			.tabItem {
				flex-shrink: 0;
				text-align: center;
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #636363;
				font-size: 28rpx;
				margin-right: 8px;
				border-radius: 50rpx;
			}

			.ac {
				background: #F9682A;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>

参考网址

https://uniapp.dcloud.net.cn/component/scroll-view.html

2.年月按钮，从某个范围开始到当前的所有的月份。

案例展示

<template>
	<view>
		<view class="tabBox">
			<scroll-view scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true" class="scrollBox">
				<view class="box">
					<view class="tabItem" v-for="(item,index) in monthList" :key="index"
						:class="{'ac':tabCurrent == index}" @click="tabChange(item,index)">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemWidth: 0, //每个item的宽度
				scrollLeft: 0, //滑动距离
				tabCurrent: 0, //默认当前月份
				sendMonth: '',
				monthList: [{}]
			}
		},
		mounted() {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let currentDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
			this.getMonthsInRange('2020-01-01', currentDate);

			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tabItem').boundingClientRect(data => {
					this.itemWidth = data.width;
					this.scrollLeft = this.itemWidth * (this.tabCurrent - 1);
				}).exec();
			})
		},
		methods: {
			tabChange(item, index) {
				this.tabCurrent = index;
				this.sendMonth = item
				this.scrollLeft = this.itemWidth * (index - 1);
				this.$emit('tabChange', this.sendMonth)
			},
			getMonthsInRange(start, end) {
				var startMonth = new Date(start).getMonth();
				var endMonth = new Date(end).getMonth();
				var startYear = new Date(start).getFullYear();
				var endYear = new Date(end).getFullYear();
				var months = [];

				for (var i = startYear; i <= endYear; i++) {
					var monthStart = i === startYear ? startMonth : 0;
					var monthEnd = i === endYear ? endMonth : 11;

					for (var j = monthStart; j <= monthEnd; j++) {
						var month = j + 1;
						months.push(i + '-' + (month < 10 ? '0' + month : month));
					}
				}
				this.monthList = months
				this.tabCurrent = this.monthList.length - 1 // 初次加载默认显示
			}
		}
	}
</script>
<style lang="scss">
	.tabBox {
		background: #ffffff;

		.scrollBox {
			margin: 0 24rpx;
			width: 700rpx;
		}

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		.box {
			// width: 1400rpx;
			display: flex;
			align-items: center;
			height: 90rpx;

			.tabItem {
				flex-shrink: 0;
				text-align: center;
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #636363;
				font-size: 28rpx;
				border-radius: 50rpx;
			}

			.ac {
				background: #F9682A;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>