微信小程序摒除了select,因为觉得这个在移动端的操作以及显示不友好,从而产生了picker,picker也就是从底部弹起的滚动选择器,现在支持的有5种,通过mode来区分。具体的参照微信小程序开发文档
https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html。
本文章主要解释一个mode为selector,平常比较常用的一些固定的选择,我们平常就这样子写了,
<picker bindchange="bindCasPickerChangeStatusEmployee" value="{{index}}" range="{{assetsStatusArrayEmployee}}" name="EmployeeStatus">
<text>在职信息:</text><text>{{assetsStatusArrayEmployee[index]}}</text>
</picker>
其中value为index,,也就是下标,range就是我们的范围。
在js中的data也需要定义一下:
data: {
index: 0,
assetsStatusArrayEmployee: ['在职','离职']
},
最后呈现的效果就是:
下面是一个升级的selector, 比如就是我们的部门信息,这个时候需要的是部门id以及展示的部门name。。这个时候就需要用到另一个属性,来决定我们展示的是什么内容了。range-key="{{'name'}}",这个就是当range是一个object array时,通过这个属性来指定object中的key的值作为选择器展示的内容。下面就是这个具体的代码。depNameArr是从后台接口获取的object array。
OK了。