uniapp-form表单（2）----picker、picker-view、radio

Picker支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。**注意：**nvue页面子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中。中，其子节点的高度会自动设置成与 picker-view 的选中框的高度一致。当需要对自定义选择的弹出方式和UI表现时，往往需要使用。写一个picker-view

m0_75047254

1360人浏览 · 2023-07-27 14:54:55

m0_75047254 · 2023-07-27 14:54:55 发布

文章内容

一、picker从底部弹起的滚动选择器。

Picker支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

1.普通选择器

mode = selector

属性说明

属性名	类型	默认值	说明	平台差异说明
range	Array / Array<Object>	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 `Array＜Object＞` 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
selector-type	String	auto	大屏时UI类型，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示	H5 2.9.9+
disabled	Boolean	false	是否禁用	快手小程序不支持
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择或点遮罩层收起 picker 时触发	快手小程序不支持

使用方法

<template>
	<view class="content">
			<text>普通选择器</text>
			<picker mode="selector" :range="list"  @change="bindselectorchange">
				<view>
					{{list[index]}}
				</view>
			</picker>
</template>

<script>
	export default {
		data() {
			return {
				list:['一号','二号','三号','四号','五号']
			}
		},
		methods: {
			bindselectorchange(e){
				console.log(e.detail.value)
				this.index = e.detail.value
			}
        }
	}
</script>

2.多列选择器

属性说明

属性名	类型	默认值	说明
range	二维 Array / 二维 Array＜Object＞	[]	mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
range-key	String		当 range 是一个二维 Array＜Object＞时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Array	[]	value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@columnchange	EventHandle		某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
@cancel	EventHandle		取消选择时触发（快手小程序不支持）
disabled	Boolean	false	是否禁用（快手小程序不支持）

使用方法

<template>
	<view class="content">
		<view class="box">
			<text>多列选择器</text>
			<picker mode="multiSelector" :range="cityList" :value="cityIndex" @change="bindCityChange">
				<view>
					{{cityList[0][cityIndex[0]]}}->{{cityList[1][cityIndex[1]]}}
				</view>
			</picker>
</template>

<script>
	export default {
		data() {
			return {
				cityList: [
					['请选择城市', '洛阳', '北京', '广州', '上海', '深圳'],
					['请选择地区', '涧西区', '洛龙区', '西工区', '汝阳县']
				]
			}
		},
		methods: {
			bindCityChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.cityIndex = e.target.value
			}
		}
	}
</script>

3.时间选择器

属性说明

属性名	类型	默认值	说明	平台差异说明
value	String		表示选中的时间，格式为"hh:mm"
start	String		表示有效时间范围的开始，字符串格式为"hh:mm"	App 不支持
end	String		表示有效时间范围的结束，字符串格式为"hh:mm"	App 不支持
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

使用方法

<template>
	<view class="content">
		<view class="box">
			<text>时间选择器</text>
			<picker mode="time" :value="time" start="00:00" end="00:12" @change="bindTimeChange">
			<view>{{time}}</view>
			</picker>
			

</template>

<script>
	export default {
		data() {
			return {
				 time: '12:01',
			}
		},
		methods: {
			bindTimeChange:function(e){
				console.log(e.detail.value)
				this.time = e.detail.value
				
			}
		}
	}
</script>

4.日期选择器

属性说明

属性名	类型	默认值	说明	平台差异说明
value	String	0	表示选中的日期，格式为"YYYY-MM-DD"
start	String		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	String		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	String	day	有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI	H5、App 2.6.3+、微信小程序、百度小程序、抖音小程序、飞书小程序
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

使用方法

<template>
	<view class="content">
		<view class="box">
			<text>日期选择器</text>
			<picker mode="date" :value="data" start="1999-01-01" end="2000-01-10" @change="bindDataChange">
				<view>
					{{data}}
				</view>
			</picker>
		</view>
		<navigator url="formText4"><button>下一页</button></navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 data: '2012-12-12'
			}
		},
		methods: {
			
			bindDataChange(e){
				console.log(e.detail.value)
				this.data = e.detail.value
				
			}
		}
	}
</script>

5.省市区选择器

属性说明

属性名	类型	默认值	说明
value	Array	[]	表示选中的省市区，默认选中每一列的第一个值
custom-item	String		可为每一列的顶部添加一个自定义的项
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择时触发（快手小程序不支持）
disabled	Boolean	false	是否禁用（快手小程序不支持）

使用方法

省市区的联动相比其他的选择器相比困难，这里推荐使用一个插件，具体操作在：http://t.csdn.cn/ImEBhhttp://t.csdn.cn/ImEBh

二、picker-view嵌入页面的滚动选择器

相对于picker组件，picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用picker-view。

属性说明

属性名	类型	默认值	平台差异说明
value	Array＜Number＞	数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String	设置选择器中间选中框的样式
indicator-class	String	设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	app-nvue与抖音小程序与飞书小程序不支持
mask-style	String	设置蒙层的样式
mask-top-style	String	设置蒙层上半部分的样式	仅 app-nvue（3.6.7+）支持
mask-bottom-style	String	设置蒙层下半部分的样式	仅 app-nvue（3.6.7+）支持
mask-class	String	设置蒙层的类名	app-nvue与抖音小程序与飞书小程序不支持
immediate-change	Boolean	是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。	微信小程序 2.21.1
@change	EventHandle	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
@pickstart	eventhandle	当滚动选择开始时候触发事件	微信小程序2.3.1、快手小程序
@pickend	eventhandle	当滚动选择结束时候触发事件	微信小程序2.3.1、快手小程序

**注意：**其中只可放置 <picker-view-column/> 组件，其他节点不会显示。

picker-view-column

<picker-view /> 的子组件，仅可放置于 <picker-view /> 中，其子节点的高度会自动设置成与 picker-view 的选中框的高度一致。

**注意：**nvue页面子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中。

使用方法

写一个picker-view的年月日选择器

<template>
	<view class="content">

		<view class="text">picker-view</view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
			class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>
		<view>
			{{year}}年{{month}}月{{day}}日
		</view>

	</view>
</template>

<script>
	export default {
		data: function() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month, day],
				visible: true,
				indicatorStyle: `height: 50px;`,
			}
		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				// console.log(this.year);
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
	}

	.box {
		width: 90%;
		height: 500rpx;
		background-color: white;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.text {
		background-color: antiquewhite;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>

三、radio单选项目

属性说明

属性说明

属性名	类型	默认值	说明
value	String		`<radio>` 标识。当该 `<radio>` 选中时，`<radio-group>` 的 change 事件会携带 `<radio>` 的 value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	Color		radio的颜色，同css的color

radio-group

单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。

属性说明

属性名	类型	默认值	说明
@change	EventHandle		`<radio-group>` 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

使用方法

<template>
	<view class="content">
		<view class="box">
			<view class="text">radio-group</view>
			<radio-group @change="getradiochange">
				<view v-for="(item,index) in items" :key="index">
					<radio :value="item.value" /><text></text>
					{{item.name}}
				</view>
			</radio-group>	
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				 items: [{
				                    value: 'USA',
				                    name: '美国',
				                    checked: 'true'
				                },
				                {
				                    value: 'CHN',
				                    name: '中国'
				                },
				                {
				                    value: 'BRA',
				                    name: '巴西'
				                },
				                {
				                    value: 'JPN',
				                    name: '日本'
				                },
				                {
				                    value: 'ENG',
				                    name: '英国'
				                },
				                {
				                    value: 'FRA',
				                    name: '法国'
				                }
				            ]
				            
			}
			
		}
	}
</script>
<style>
	.content {
		width: 100%;
	}

	.box {
		width: 90%;
		height: 500rpx;
		background-color: white;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.text {
		background-color: antiquewhite;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>