【uniapp】picker选择器用法_uniapp picker

背景 : 点击界面"选择医院" 弹出picker滚动选择医院
太久没用使用picker了, 虽然这是非常简单的应用, 但昨天做这个需求时踩了一些坑, 分不清picker和picker-view , 降低了工作效率, 不爽啊~ 所以小小地记录下吧~

特别说明 :
特别要说明的一点, picker是从底部弹起的滚动选择器, 有自带的默认样式. 点击picker即弹出选择器, 而不需要按钮点击来另外控制选择器打开!!! 这是我昨天踩坑的误区!!!

<picker class="picker" @change="changePickerUnit($event,unitList)" :value="indexUnit" :range="unitList" :range-key="'hospital'">
	<view class="picker">
		// {{unitList[indexUnit].hospital}}
		{{unitName}}
	</view>
</picker>
1
2
3
4
5
6

	  indexUnit:0, // 选中的下标
	  unitName:'请选择医院',  // 默认选项
	  unitList:[
	  {
	  	  id:1,
	  	  hospital:'南方医院1'
	  },{
		  id:1,
		  hospital:'南方医院2'
	  },{
		  id:1,
		  hospital:'南方医院3'
	  }]
	  
	// 
	changePickerUnit(e,unitList) {
		console.log(e)
		let index = e.detail.value;
		this.indexUnit = index
		this.unitName = unitList[index].hospital  // 这里给展示的text赋值
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

其他问题:

1. 初始化是显示默认选项
   解决 : 默认项需要设置为"请选择医院", 而不是unitList第一项选项, 但是indexUnit 下标又不能默认null, 否则整个页面会出不来, 这里需要做个巧妙的转换, 需要一个变量承载默认值unitName , 在@change调用时, 再给unitName 赋值

2. @change事件
   change事件的$event没有返回选中的value, 而是返回了下标, 这就需要我通过下标去查找item, 实际操作不应该这样, 以为index容易出现拿到的item数据错误, 有知道原因的大佬欢迎留言告知哦~~

3. 默认样式修改
   如上图所示, 默认"确认"按钮颜色是蓝色, 而我们项目themeColor是橙色, 就需要我去更改按钮颜色, 但是文档并没有提供相关属性, 我通过css去修改, 并不能修改颜色~ 加了deep选择器也不行, 加了!important也不行~ 头大~ 有知道处理方法的大佬也欢迎告知哦~

综上, 如果需要自定义样式的话, 建议还是用picker-view或者其他ui组件, 不要用picker了~

.uni-picker-container .uni-picker-action.uni-picker-action-confirm{
	color: #000 !important;
}
1
2
3