u-popup結(jié)合picker-view搭配使用實(shí)現(xiàn)時(shí)間段選擇器

<template>
	<view>
		<button @click="time_show=true">選擇時(shí)段</button>
		<view>
			時(shí)間：<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">確認(rèn)</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}}時(shí)</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}}時(shí)</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>

效果圖：

?文章來源地址http://www.zghlxwxcb.cn/news/detail-615111.html

到了這里，關(guān)于uniapp 實(shí)現(xiàn)時(shí)間段選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！