uniapp 实现时间段选择器

这篇具有很好参考价值的文章主要介绍了uniapp 实现时间段选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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>

效果图:

uniapp时间选择器,uniapp,uni-app

 文章来源地址https://www.toymoban.com/news/detail-615111.html

到了这里,关于uniapp 实现时间段选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包