uni-app 选择时，分的时间选择器

缺乏、安全感 2022-10-27 01:35 11阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]

<picker mode="multiSelector" @change="Change($event, item)" :value="index" :range="timeOptions">
    	<view class="uni-input">{
       {item.timeVal}}</view>
    </picker>

data() {                                                                          
    	return { 
    		timeOptions: [
    			['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
    			['00', '05', '10','15','20','25','30','35','40','45','50','55']
    		],
    		index: [0, 0],
    		timeVal: null
    	}
    },
    methods: { 
    	Change: function (e, item) { 
    		this.index = e.target.value
    		this.timeVal = `${ this.timeOptions[0][this.index[0]]}:${ this.timeOptions[1][this.index[1]]}`
    		item.timeVal = this.timeVal
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/78582a1bc15f4650b705123f641ee435.png

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android中TimePicker时间选择器的使用和获取选择的时和分

场景实现效果如下 ![20200105161359107.gif][] 注：博客： [https://blog.csdn.net/badao\_liuman

缺乏、安全感/ 2023年10月08日 11:33/ 0 赞/ 8 阅读

相关时间选择器

1、创建一个时间选择器的类 2、在主页中使用该类创建一个时间选择器的类 package com.nf.bottomdemo.utils; im

你的名字/ 2023年08月17日 17:09/ 0 赞/ 134 阅读

相关 jq 时间选择 flatpickr 时间选择器的使用

<!DOCTYPE html> <html lang="en"> <head> <title>jq 时间选择</title>

以你之姓@/ 2023年07月06日 08:43/ 0 赞/ 122 阅读

相关时间选择器

$("order_timestart").datetimepicker({ format: 'yyyy-mm-dd', autoclose: t

谁践踏了优雅/ 2023年06月10日 04:28/ 0 赞/ 74 阅读

相关微信小程序开发之选择器时间选择器日期选择器地区选择器

用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: ![Center][] 上代码: 1.index.

墨蓝/ 2023年02月27日 12:21/ 0 赞/ 131 阅读

相关 element——时间选择器当天之后，后一选择器时间不超过前时间选择器

element——时间选择器当天之后，后一选择器时间不超过前时间选择器 <el-date-picker type="date" placehol

た入场券/ 2023年01月09日 12:48/ 0 赞/ 409 阅读

相关 uniapp滚动选择器 picker

从底部弹起的滚动选择器 picker > 支持五种选择器, 通过mode来区分, 分别是普通选择器(selector), 多列选择器(multiSelector), 时间

小鱼儿/ 2022年11月27日 02:00/ 0 赞/ 779 阅读

相关 uniapp滑动选择器 slider

滑动选择器 slider 属性说明 1. min: 最小值 2. max: 最大值 3. step: 步长, 取值必须大于0, 并且可被(max - min)整除

水深无声/ 2022年11月27日 01:59/ 0 赞/ 610 阅读

相关 uni-app 选择时，分的时间选择器

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

缺乏、安全感/ 2022年10月27日 01:35/ 0 赞/ 12 阅读

相关 uniapp中的picker选择器

目录一、普通选择器二、多列选择器三、时间选择器四、日期选择器 -------------------- 一、普通选择器 ![2021030621

心已赠人/ 2021年07月25日 15:56/ 0 赞/ 4057 阅读