uniapp 实现时间段选择器

最新推荐文章于 2026-04-03 15:39:00 发布

原创最新推荐文章于 2026-04-03 15:39:00 发布 · 3.2k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app

uniapp 专栏收录该内容

2 篇文章

订阅专栏

该代码示例展示了如何结合u-popup组件和picker-view在Vue.js应用中创建一个自定义的时间段选择器。用户点击按钮后，弹出一个下拉菜单，包含小时和分钟的选择，可以选择开始和结束时间。当选定时间后，界面上会显示所选时间段。

u-popup结合picker-view搭配使用实现时间段选择器

<template>
	<view>
		<button @click="time_show=true">选择时段</button>
		<view>
			时间：<text v-if="hour<10">0</text>{{hour}}:<text v-if="minute<10">0</text>{{minute}}
				- <text v-if="hour2<10">0</text>{{hour2}}:<text v-if="minute2<10">0</text>{{minute2}} 
		</view>
		<u-popup :safeAreaInsetBottom="true" :show="time_show" :round="4" @close="time_show = false">
			<view class="time_title">
				<view style="color: #666666;" @click="time_show=false">取消</view>
				<view style="color: #FF6E00;" @click="time_show=false">确认</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
				<view class="box">至</view>
				<picker-view-column>
					<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data: function() {
			const date = new Date()
			const hours = []
			const hours2 = []
			const minutes = []
			const minutes2 = []
			for (let i = 0; i <= 23; i++) {
				hours.push(i)
			}
			for (let i = 0; i <= 59; i++) {
				minutes.push(i)
			}
			for (let i = 0; i <= 23; i++) {
				hours2.push(i)
			}
			for (let i = 0; i <= 59; i++) {
				minutes2.push(i)
			}
			return {
				time_show: false,
				hour: date.getHours(),
				minute: date.getMinutes(),
				hour2: date.getHours(),
				minute2: date.getMinutes(),
				hours2,
				minutes2,
				hours,
				minutes,
				indicatorStyle: `height: 50px;`
			}
		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				this.hour = this.hours[val[0]] ? this.hours[val[0]] : '0'
				this.minute = this.minutes[val[1]] ? this.minutes[val[1]] : '0'
				this.hour2 = this.hours[val[3]] ? this.hours[val[3]] : '0'
				this.minute2 = this.minutes[val[4]] ? this.minutes[val[4]] : '0'
			}
		}
	}
</script>
<style>
	.time_title {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		font-size: 32rpx;
	}

	.box {
		position: absolute;
		left: 360rpx;
		top: 280rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>

效果图：