微信小程序—picker组件（range 是一个 Object Array）

最新推荐文章于 2025-03-07 12:59:28 发布

chibimarukochan

最新推荐文章于 2025-03-07 12:59:28 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： picker 多列选择器 Object Array

本文链接：https://blog.youkuaiyun.com/ChibiMarukoChan/article/details/91041214

本文详细介绍了微信小程序中Picker组件如何配合Object Array使用，特别是当range为Object Array时，通过range-key指定Object的key作为显示内容。以二级联动为例，展示了后台返回数据的格式，并提供了数据初始化及列变化时获取新数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要记录：当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

此处就以二级联动为例：

 <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
  
  {multiIndex}}" range="{
  
  {multiArray}}" range-key='ChineseName'>
     <view class="picker">
        {
  
  {multiArray[0][multiIndex[0]].ChineseName}}，{
  
  {multiArray[1][multiIndex[1]].ChineseName}}
     </view>
 </picker>

后台获取的数据格式如下：

在onload方法中初始化数据：

data:{
    city: [],
    station: '',
    multiArray: [[], []],
    multiIndex: [0, 0],
},  
onLoad: function (options) {
    this.getCityStationPer();