【uniapp】picker选择器用法

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

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

<pickerclass="picker"@change="changePickerUnit($event,unitList)":value="indexUnit":range="unitList":range-key="'hospital'"><viewclass="picker">
        // {{unitList[indexUnit].hospital}}
        {{unitName}}
    </view></picker>

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. 初始化是显示默认选项解决 : 默认项需要设置为"请选择医院", 而不是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;}