微信小程序picker的坑

时间：2021-11-09 16:11:31

js文件：

 Companyarr: [{

      id: '公司id1',

      companyname: "公司1的名字"

    }, {

      id: '公司id2',

      companyname: "公司2的名字"

    }],
  Companyindex: 0,
 

wxml文件：

<form bindsubmit='bindformSubmit'>

  <text class="input-item-label">所属公司</text>

  <picker name='UserCompany' class="input-item-content" bindchange="bindPickerChange" data-pickername="UserCompany" value="{{Companyindex}}" range-key='{{"companyname"}}' range="{{Companyarr}}" mode="selector">{{Companyarr[Companyindex].companyname}}

  </picker>

  <button class="btn-block btn-orange" formType="submit">申请认证</button>

</form>

1.当range是ObjectArray时，range-key的作用是通过 range-key 来指定 Object 中 key 的值作为选择器显示内容。此时rang-key注意：大括号里面一定要加引号，也可以用range-key='companyname' 这种形式。

PS：rang-key就是指定在页面上要显示对象数组中那个属性的值，和后面的{{Companyarr[Companyindex].companyname}}对应

2.关于value值得问题

官方文档：微信小程序picker的坑

解释value是数组的索引，按照上面的写法(正确的写法就是这种)，当我们提交表单，通过e.detail得到的表单的值，UserCompany对应的值就是你所选项的数组索引值，在大多数情况下，这并不是我们想要的，我们一般要得到的是对象数组中某个属性的值，当然通过索引，也可以在获得到我们想要的值，但是能不能在提交表单的时候，直接获得我们想要的值呢，答案是可以的(但是会有一些问题)，上述例子中比如我们要得到的是id，那么我们直接给value绑定{{Companyarr[Companyindex].id}}，这样通过e.detail我们获取UserCompany值就是我们想要的id值。如果我们只是一次性操作，之后也不会对信息进行更改这样是没用任何问题的，但是我想一般情况下应该不会是这样，当我们选择之后要重新选择，或者表单提交之后，要修改信息进行重新选择，那么你会发现bug了，就是当点击出现选项后，你会发现选项中默认选中的不是我们当前选择的这个，比如我们原来选择的是“公司2的名字”，跳出的选项默认选择还是“公司1的名字”，这就是没有指定选项索引的原因。如果按照正确的写法，页面加载时我们会给picker的value找到正确的索引值，进行赋值操作，这样当点击选择框弹出的框就会某人选中我们当前选择的值。

直接保存我们指定的某个属性的值，通过value指定的话，总体来说可行，但是就是会出现上述的问题。但是微信为什么不给一个属性用来专门指定索引值，而用value保存我们需要的东西呢。想不通，还是我没发现怎么弄呢？？？？

相关文章