背景 : 点击界面"选择医院" 弹出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>
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赋值
},
其他问题:
-
初始化是显示默认选项
解决 : 默认项需要设置为"请选择医院", 而不是unitList第一项选项, 但是indexUnit 下标又不能默认null, 否则整个页面会出不来, 这里需要做个巧妙的转换, 需要一个变量承载默认值unitName , 在@change调用时, 再给unitName 赋值 -
@change事件
change事件的$event没有返回选中的value, 而是返回了下标, 这就需要我通过下标去查找item, 实际操作不应该这样, 以为index容易出现拿到的item数据错误, 有知道原因的大佬欢迎留言告知哦~~ -
默认样式修改
如上图所示, 默认"确认"按钮颜色是蓝色, 而我们项目themeColor是橙色, 就需要我去更改按钮颜色, 但是文档并没有提供相关属性, 我通过css去修改, 并不能修改颜色~ 加了deep选择器也不行, 加了!important也不行~ 头大~ 有知道处理方法的大佬也欢迎告知哦~文章来源：https://www.toymoban.com/news/detail-532515.html
综上, 如果需要自定义样式的话, 建议还是用picker-view或者其他ui组件, 不要用picker了~文章来源地址https://www.toymoban.com/news/detail-532515.html
.uni-picker-container .uni-picker-action.uni-picker-action-confirm{
color: #000 !important;
}
到了这里，关于【uniapp】picker选择器用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
