关于uniapp的picker的使用

￡神魔★判官ぃ 2023-07-25 14:01 11阅读 0赞

最近入职的一家公司是基于uniapp开发app的，很多东西不懂，最近遇到一个关于picker选择的问题

要求二级联动，左边选择省份，右边选择市

![在这里插入图片描述][20200415130549782.png_pic_center]  
但是picker的原生的选择只有  
![在这里插入图片描述][202004151310449.png_pic_center]  
这样的三级联动，没有选择省然后再选择市这样单独选择的模式

然后我去uniapp的官网查看了 picker的描述和属性：  
mode属性：  
它有五个属性值

1.  mode = selector 表示普通选择器

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>range</td> 
   <td>这个是picker展示的用于选择的数据，数据格式为Array或者Object格式</td> 
  </tr> 
  <tr> 
   <td>range-key</td> 
   <td>这是展示的数据的值，当range的数据是一个数组包裹对象的格式，通过它来表示显示对象的那个属性</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>这属性表示显示的下标，就是表示选择了range的第几个(就是选择的值相对于的下标，是从0开始的)</td> 
  </tr> 
  <tr> 
   <td>@change</td> 
   <td>用于定义改变了(选择了列表)的事件，其中event.detail 的值就是当前选择的下标</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>表示是否禁用，就是是否可以触发选择事件，如果值为true表示改picker不可以选择</td> 
  </tr> 
  <tr> 
   <td>@cancel</td> 
   <td>取消选择或点遮罩层收起 picker 时触发</td> 
  </tr> 
 </tbody> 
</table>

1.  mode = multiSelector 表示多列选择器

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>range</td> 
   <td>这里的是展示的数据，这里的数据应该是一个二维数组，就是数组包对象，对象再包数组的格式</td> 
  </tr> 
  <tr> 
   <td>range-key</td> 
   <td>这个表示需要显示的数据的键值对中的键</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>他的值是下标从0开始</td> 
  </tr> 
  <tr> 
   <td>@change</td> 
   <td>value 改变时触发 change 事件，event.detail = {value: value}</td> 
  </tr> 
  <tr> 
   <td>@columnchange</td> 
   <td>这是多列显示特有的事件，当某一列发生改变的时候触发，event.detail = {column: column, value: value}，column表示改变的列，value表示改变的当列的下标的值</td> 
  </tr> 
  <tr> 
   <td>@cancel</td> 
   <td>取消选择时触发的事件</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>表示改选择框是否禁用，默认值为false</td> 
  </tr> 
 </tbody> 
</table>

因为JavaScript的限制不可以检测数组的下标发生改变或者通过数组的下标来修改数组对应的值  
![在这里插入图片描述][20200415195322631.png_pic_center]  
但是再微信开发工具的pc模拟器可能出现拖动数据错乱，但是真机使用正常

解决办法，使用splice方法通过下标改对应数组的数据即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]  
对于vue的解决办法有两种，一个是用set方法，另外一个是使用 splice方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]  
3. mode = time 表示时间选择器

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>表示选中的时间，格式为"hh:mm"</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>表示有效时间范围的开始,格式为字符串，字符串格式为"hh:mm"(App不支持)</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>表示有效时间范围的结束，格式为字符串，字符串格式为"hh:mm"(App不支持)</td> 
  </tr> 
  <tr> 
   <td>@change</td> 
   <td>value 改变时触发 change 事件，event.detail = {value: value}</td> 
  </tr> 
  <tr> 
   <td>@cancel</td> 
   <td>取消选择时触发的事件</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>表示是否禁用改选择框，默认值为false</td> 
  </tr> 
 </tbody> 
</table>

1.  mode = date 表示日期选择器

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>表示选中的日期，格式为"YYYY-MM-DD"</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"</td> 
  </tr> 
  <tr> 
   <td>fields</td> 
   <td>有效值 year,month,day，表示选择器的粒度，默认为day，year表示选择粒度为年，month表示选择选择选择的粒度为月</td> 
  </tr> 
  <tr> 
   <td>@change</td> 
   <td>value 改变时触发 change 事件，event.detail = {value: value}，同上表示下标</td> 
  </tr> 
  <tr> 
   <td>@cancel</td> 
   <td>取消选择时触发的事件</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用，默认值为false</td> 
  </tr> 
 </tbody> 
</table>

1.  mode = region 表示地区选择器  
    多列picker方式的地区选择不能运行在支付宝小程序上,只有基于picker-view的可以全端运行

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>表示选中的省市区，默认选中每一列的第一个值，数组格式</td> 
  </tr> 
  <tr> 
   <td>custom-item</td> 
   <td>可为每一列的顶部添加一个自定义的项</td> 
  </tr> 
  <tr> 
   <td>@change</td> 
   <td>value 改变时触发 change 事件，event.detail = {value: value}，同上</td> 
  </tr> 
  <tr> 
   <td>@cancel</td> 
   <td>取消选择时触发</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用，默认值为false</td> 
  </tr> 
 </tbody> 
</table>

<view class="list">
    				<view class="school">
    					<picker mode="selector" :range="provinceData" range-key="label"  @change="sheng">
    						<image class="arrow_down" src="/static/images/login_arrow_down.png" mode=""></image>
    						<text class="check_school">{ { province}}</text>
    					</picker>
    				</view>
    				<view class="class">
    					<picker mode="selector" :range="city1" range-key="label" :disabled='jy'  @change="shi">
    						<image class="arrow_down" src="/static/images/login_arrow_down.png" mode=""></image>
    						<text class="check_school">{ { cityy}}</text>
    					</picker>
    				</view>
    			</view>

sheng(e){ 
    				var _this = this 
    				console.log(e);
    				var index = e.detail.value 
    				_this.province = _this.provinceData[index].label 
    				_this.city1  = _this.city[index] 
    				// console.log(JSON.stringify(_this.city1));
    				
    				_this.jy = false
    			}
    
    shi(e){ 
    				var _this = this 
    				var index = e.detail.value 
    					_this.cityy = _this.city1[index].label 
    			},

关于城市的数据，是引入uniapp对应的城市的包，  
结果研究发现它们的城市的数据是关于下标对应的，就是说第一个省份的包的对应省的下标，就是关于市列表包对应的下标  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 3]  
所以只需要通过value获取当前选择的省份，再通过对应的下标获取对应的市级别的列表即可  
这里需要注意的是，需要对市和一下的级别的选择添加一个禁止属性，因为对于逻辑上来说，只有选择省分后才能选择市

[20200415130549782.png_pic_center]: /images/20230528/6d6085f764f74c808548e6542eb65b9e.png
[202004151310449.png_pic_center]: /images/20230528/17cc721180094cf7beb37ce86b3b3618.png
[20200415195322631.png_pic_center]: /images/20230528/5e3379966ab74e08a97cefdacb302611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/b9eed291873c46159ca37d89167ffe3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/05cd8f987e78405883e714449d76271f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230528/97aee36213874589b9c994dfebca6a11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230528/83ca6702ba4542dda96e9eb2f30d4ab9.png