uni——月份选择（横向滑动tab,横向滚动选择日期）vue2、vue3

原创 已于 2025-07-04 15:13:39 修改 · 2k 阅读 · 7 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #前端 #开发语言
于 2023-08-09 13:52:51 首次发布
文章介绍了如何在uni-app应用中使用scroll-view组件实现动态加载年月按钮，展示了一个从特定范围到当前日期的月份列表切换和滚动功能的案例。
该文章已生成可运行项目，

一、案例展示

在这里插入图片描述

案例代码

已封装成组件使用
<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>

二、案例展示

在这里插入图片描述

<template>
	<layout title="安装订单" :left-arrow="true" back-height="0" bgColor="#ffffff" titleColor="#000000">
		<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 tabList" :key="index"
						:class="{'ac':tabCurrent == item.id}" @click="tabChange(item,index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
	</layout>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onReady
	} from '@dcloudio/uni-app'
	import api from '@/request/api';
	import i from '@/libs/common/index.js'
	onLoad(() => {})
	onReachBottom(() => {
		console.log("触底");
	})
	onReady(() => {
		const query = uni.createSelectorQuery().in(this);
		query.select('.tabItem').boundingClientRect(data => {
			console.log(data);
			itemWidth.value = data.width + 8;
			scrollLeft.value = itemWidth.value * (tabCurrent.value - 1);
		}).exec();
	})
	const tabList = ref([{
		id: 1,
		name: '总站分配'
	}, {
		id: 2,
		name: '分站分配'
	}, {
		id: 3,
		name: '待接单'
	}, {
		id: 4,
		name: '进行中'
	}, {
		id: 5,
		name: '待验收'
	}, {
		id: 6,
		name: '已完成'
	}])
	const tabCurrent = ref(1) //默认
	const itemWidth = ref(0) //每个item的宽度
	const scrollLeft = ref(0) //滑动距离
	function tabChange(item,index) {
		tabCurrent.value = item.id
		scrollLeft.value = itemWidth.value * (index - 1);
	}
</script>


<style lang="scss">
	.tabBox {
		background: #ffffff;

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

		.box {
			width: 900rpx;
			border: 1px solid red;
			margin: 0 24rpx;
			display: flex;
			align-items: center;
			height: 100rpx;

			.tabItem {
				flex-shrink: 0;
				display: inline-block;
				padding: 14rpx 20rpx;
				color: #636363;
				font-size: 28rpx;
				margin-right: 8px;
				border-radius: 50rpx;
			}

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

三、案例展示 vue3

在这里插入图片描述
在这里插入图片描述

<template>
	<view>
		<view class="head">
			<view class="box">
				<fui-nav-bar title="收入流水" background="#00000000" color="#FFFFFF">
					<fui-icon name="arrowleft" color="#ffffff" @click="i.back()"></fui-icon>
				</fui-nav-bar>
				<scroll-view scroll-x="true">
					<view class="items">
						<view class="items-item" v-for="(item,index) in tab" :key="index">
							<view class="item" :class="index==2?'active' : ''" @click="changTab(index)">
								{{item.value}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import i from '@/libs/common/index.js'
	import {
		userStore
	} from '@/store/userStore.js'
	import {
		commonStore
	} from '@/store/commonStore.js'
	const user = userStore()
	const common = commonStore()
	const tab = ref([])
	const month = ref([])

	onLoad(() => {
		tab.value = getMonthsRange()
		month.vlaue = tab.value[2].value
	})
	const getMonthsRange = (dateStr = '') => {
		let now = new Date();
		if (dateStr) {
			const [year, month] = dateStr.split("-").map(Number);
			now = new Date(year, month - 1, 1); // JS 月份从 0 开始
		}

		const months = [];
		for (let i = -2; i <= 2; i++) {
			const date = new Date(now.getFullYear(), now.getMonth() + i, 1);
			let month = date.getMonth() + 1
			if (month < 10) {
				month = '0' + month
			}
			months.push({
				value: date.getFullYear() + '-' + month,
			});
		}
		return months;
	}
	const changTab = (index) => {
		tab.value = getMonthsRange(tab.value[index].value)
		month.value = tab.value[2].value
	}
	
</script>

<style lang="scss">

	.head {
		width: 100%;
		height: 537rpx;
		position: relative;
		.box {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 2;
			top: 0;
			left: 0;
		
			.items {
				display: flex;
				align-items: center;
				justify-content: space-around;
				// border-bottom: 1rpx solid rgba($color: #FFFFFF, $alpha: 0.18);
				padding-bottom: 10rpx;
				padding-top: 10rpx;
				.items-item {
					width: 20%;
					text-align: center;

					.active {
						margin: 0 auto;
						width: 140rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 31rpx;
						line-height: 61rpx;
						text-align: center;
						color: #10664D !important;
					}

					.item {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}

			}
		}
	}
</style>
本文章已经生成可运行项目
uniapp实现横向滚动选择日期
01-18
本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码，供大家参考，具体内容如下 1.方法封装 common.js //获取当前时间，格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() < 10 ? 0 + date.getHours() : date.getHours(), minut
uniapp(vue3) -实现横向滚动选择日期组件，手势左右滑动选择日期，类似电影选票日期Tabs选项卡横向滚动一周日历周历，横向滑动日期选择器（全端兼容H5网页、小程序、安卓/苹果app、nvue
最新发布
✅ 精选推荐文章
01-06 7808
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，uniapp横向滚动选择日期，横向滑动日期，uniapp横向滑动日期选择器（获取当前月前几个月的日期）uniApp横向时间选择器，单行横向滑动的日历控件，uniapp小程序横向滑动选择日期组件，uniapp类似tabs标签页选择日历，uniapp日期选择器uniapp实现横向滚动选择日期，日期侧滑滚动选择，日历横向滚动对其星期，uniapp如何实现横向滚动周历,横向滚动一周日历，横向滑动tab,横向滚
uniapp会议预约顶部横向滑动日历和时间线
m0_65546127的博客
08-07 899
【代码】uniapp会议预约顶部横向滑动日历和时间线。
vue uniapp如何实现横向滚动周历,横向滚动一周日历
m0_60531448的博客
08-22 3469
uniapp实现可滚动周历,今天高亮,swiper实现周历,滚动7天
uniapp时间选择器（月份选择、区间时间选择）
2302_78685420的博客
10-21 5379
仿照支付宝时间选择，月份及区间时间组件；
uniapp实现横向滚动效果(类似时间选择)
meng16的博客
02-24 2739
实现效果: 根据滑动可以把选择后的数据,放在蓝色框里,左右滑动都有震动的效果 需要的组件:scroll-view,wx.vibrateShort的震动效果,在手机上测试很nice 上代码 <template> <view class="content"> <scroll-view scroll-x class="page" @scroll="scroll"> <view class="num-content"> <view clas
uniapp时间日期选择器 - 只选择月份 - 月份选择器picker
热门推荐
Rudon滨海渔村的博客
03-24 1万+
效果图 完整代码 <template> <view> <picker mode="date" fields="month" :value="date" @change="bindDateChange"> <view class="uni-input">{{date}}</view> </picker> </view> </template> <script> e
uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件
zh626678的博客
01-23 9016
自定义选择日、周、月、季、年的日期选择器组件
vue 封装月份多选组件
金乌的博客
05-18 3468
element el-date-picker 还没有 type="months" 可以选择多个月份的功能。现在若想选则多个月份，可直接使用element。本文仅对之前写的月份组件做个记录。一、直接使用el-date-picker type="months"1、新建组件 SelectMonths.vue。2、使用组件 SelectMonths。
uniAPP 实现月份选择器
sinat_33255495的博客
03-01 1557
利用 uni-forms-item ，在 picker 里边套 input 实现。
uni-app(三)年月选择器
LovelyLittleCub的博客
05-06 1322
next-date-picker，本身也可以选择日，但是我把日隐藏了，具体可以参考链接地址。项目种需要运用选择年月的组件，但是uni-app里面没有，所以通过查找资料找到一款插件。DCloud 插件市场。DCloud 插件市场。
uniapp使用picker实现月份选择器
weixin_44265726的博客
11-22 3694
uniapp实现月份选择器
uniapp横向滚动选择日期
Lucky铂爵
05-15 3281
1.方法封装 common.js //获取当前时间，格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
uniapp横向滚动（scroll-view）
babyxuqian的博客
10-19 1万+
属性名 类型 默认值 说明 平台差异说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发
uni-app vuex全局计时
weixin_43018356的博客
09-14 896
功能需求，在A页面进入时候开始计时中间会去到B页面查看数据，但是并没有销毁当前页面，所以计时一直在，直到在B页面提交数据，才结束计时。
uniapp 使用css transform 实现 日期滚动选中
m0_51282855的博客
04-22 670
【代码】uniapp 使用css transform 实现 日期滚动选中。
uni-app实现可选择日期、范围、打点的月份日历
weixin_46189889的博客
12-10 7552
1、始终标记每个月和今天相同的日期，为淡蓝色 2、月份切换为滑动切换 3、可以进行下方打点标记 4、选择日期（日期日期为多选，因功能需要不可选择今天、今天之前、非本月的日期） （1）单击即可选中日期，选中后为深蓝色 （2）长按日期即可开启范围选择，选中范围开始日期，然后单击范围结束日期，即可选中范围，选完范围后，范围选择关闭 （3）已经选中的日期，单击可取消选中 （4）有选中日期时会出现取消选中按钮，点击即可取消所有选中日
uniapp-实现、按月 - 按周、选择日期
m0_73324389的博客
03-31 4068
uniapp 按月按周选择日期
VUE项目中基于elementUI自定义月日组件 定制化月日组件
Taurus_666
12-02 1569
vue项目内基于elementUI 自定义月日组件，支持根据年份展示不同月份日期不同，以及支持禁用部分日期
uniapp picker实现选择年月demo效果(整理)
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-12 2675
uniapp picker实现选择年月demo效果(整理)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值