uniapp 自定义时分选择器picker-view

最新推荐文章于 2024-08-09 15:31:19 发布

彭跃PENG

最新推荐文章于 2024-08-09 15:31:19 发布

阅读量3.3k

点赞数 1

文章标签： uniapp

本文链接：https://blog.csdn.net/weisongxia0152/article/details/107351980

版权

uniapp 自定义时分选择器picker-view

	<view class="picker-header">
		<view class="cancel">取消</view>
		<view class="text"></view>
		<view class="confirm">确定</view>
	</view>
	<picker-view class="picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="timeValue" @change="bindChange">
		<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>

	getTime() {
		const date = new Date()
		this.hours = []
		const hour = date.getHours()
		this.minutes = []
		const minute = date.getMinutes()
		const h = [];
		const m = [];
		for (let i = 1; i <= 24; i++) {
			h.push(i)
		}
		for (let i = 1; i <= 60; i++) {
			m.push(i)
		}
		this.hours = h;
		this.minutes = m;
		this.timeValue = [hour - 1, minute - 1];
	}