uniapp 多列picker选择

uniapp 多列picker选择

在这里插入图片描述

代码块

<template>
	<view>
		<h1>多列选择</h1>
		<p>请选择</p>
		<picker :range="Arrays" @change="ArraysChange" mode="multiSelector">
			{{ Arrays[0][optionsIndex1] }}{{ Arrays[1][optionsIndex2]  }}{{ Arrays[2][optionsIndex3]  }}</picker>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				Arrays: [
					[2022, 2023, 2024, 2025],
					[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
					[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
						28, 29, 30
					]
				],
				optionsIndex1: 0,
				optionsIndex2: 0,
				optionsIndex3: 0,
			}
		},
		methods: {
			ArraysChange: function(e) {
				console.log(e)
				this.optionsIndex1 = e.detail.value[0];
				this.optionsIndex2 = e.detail.value[1];
				this.optionsIndex3 = e.detail.value[2];
			}
		}
	}
</script>

<style>

</style>
  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp中,可以使用picker组件实现多列选择器的功能。你可以使用以下代码作为示例: ```html <template> <view> <picker @change="bindPickerChange" :value="index" :range="array" range-key="name"> <view style="padding: 20rpx;background-color: white;">{{ array[index].name }}</view> </picker> </view> </template> <script> export default { data() { return { array: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }], index: 2, }; }, methods: { bindPickerChange: function(e) { this.index = e.detail.value; } } }; </script> ``` 在上述代码中,`array`是一个包含多个选项的数组,每个选项都有一个`name`属性表示选项的名称。`index`是用来绑定picker选择的索引值。当picker选择发生变化时,会调用`bindPickerChange`方法来更新`index`的值,从而实现多列选择器的功能。 另外,Uniapp还提供了其他类型的选择器,比如时间选择器和日期选择器。你可以使用以下代码作为示例: ```html <template> <view> <picker mode="time" :value="time" :start="minTime" :end="maxTime" @change="bindTimeChange"> <view style="background-color: white;">{{ time }}</view> </picker> </view> </template> <script> export default { data() { return { time: '12:01', minTime: '09:01', maxTime: '21:01' }; }, methods: { bindTimeChange: function(e) { this.time = e.detail.value; } } }; </script> ``` 上述代码中,可以通过设置`mode`为"time"来创建时间选择器。可以使用`value`属性设置默认选中的时间,`start`属性和`end`属性分别设置可选择的时间范围。当时间选择发生变化时,会调用`bindTimeChange`方法来更新`time`的值。 同样地,你也可以使用以下代码来创建日期选择器: ```html <template> <view> <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> <view style="background-color: #07C160;">{{ date }}</view> </picker> </view> </template> <script> function getDate(type) { const date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (type === 'start') { year = year - 10; } else if (type === 'end') { year = year + 10; } month = month > 9 ? month : '0' + month; day = day > 9 ? day : '0' + day; return `${year}-${month}-${day}`; } export default { data() { return { date: getDate('format'), startDate: getDate('start'), endDate: getDate('end'), }; }, methods: { bindDateChange: function(e) { this.date = e.detail.value; } } }; </script> ``` 在上述代码中,可以通过设置`mode`为"date"来创建日期选择器。可以使用`value`属性设置默认选中的日期,`start`属性和`end`属性分别设置可选择的日期范围。当日期选择发生变化时,会调用`bindDateChange`方法来更新`date`的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值