微信小程序开发文档中针对picker做了详细的解释,但根据笔者的使用,发现了一个好玩的地方。
先针对picker 普通选择器:mode = selector 这个模式说下属性吧
上图是微信小程序官方文档的说明,以下是我的自己理解:
range属性,类型为array或者object Array,他的作用只是让你当前使用的picker指明调用哪一个数据,如下,我有两个数组的数据
deviceTypeList:["请选择类型","类型一","类型二","类型三"],
deviceArrayList:[
{ id: 0, name:"请选择类型"},
{ id: 1, name:"类型一"},
{ id: 2, name:"类型二"},
{ id: 3, name:"类型三"}
],
当使用微信小程序开发文档的range为array时,实例如下所示
<picker bindchange="bindDeviceTypeChange" value="{{deviceType}}" range="{{deviceTypeList}}">
<label class="label">类型</label><text class='inputText'>{{deviceTypeList[deviceType]}}</text>
</picker>
调用的数组数据为
deviceTypeList:["请选择类型","类型一","类型二","类型三"]
此时的picker-value值为数组中你所选择数据的下标值(数组下标从0开始);当然有人会问value属性中配置的是什么,那是js文件中点击picker标签后,保存的全局下标值。
若出现你需要从服务器获取数据信息,但不是根据数组数据的下标取得,而是必须按照服务器给定的id属性获取对应的值,此时你需要使用range属性为Object Array的,Object Array不是指你需要写range=“Object Array”,他的意思是使用range属性指明wxjs文件中所定义的一个数组信息。此时案例如下所示:
<picker bindchange="bindDeviceTypeChange" value="{{deviceType}}" range="{{deviceArrayList}}" range-key="name">
<label class="label">类型</label><text class='inputText'>{{deviceArrayList[deviceType].name}}</text>
</picker>
使用到的数组值为:
deviceArrayList:[
{ id: 0, name:"请选择类型"},
{ id: 1, name:"类型一"},
{ id: 2, name:"类型二"},
{ id: 3, name:"类型三"}
]
value中的属性值为点击选中picker标签中的某条数据后,全局保存的数组的id值。
因为在我自身定义的数据结构中采用每个对象只有两条属性,分别是id和name,当我点击picker标签,需要显示name值,所以必须添加range-key="name",此时的name为定义数组中的某个key值信息。如果你的range-key=“”中出现了数组中不存在key信息,当你点击picker标签后,显示的全部是"undefind"。
针对如何取得对象数组中指定的id值。
<view class='inputView'>
<picker bindchange="bindDoorChange" value="{{checkedDoorVal}}" range="{{pickerCheckArrayList}}" range-key="value">
<label class="label">门磁报警</label>
<text class='pickerText'>{{pickerCheckArrayList[checkedDoorVal].value}}</text>
</picker>
</view>
对应的对象数组:
pickerCheckArrayList:[
{id:5,value:"关"},
{id:1,value:"开"}
],
上面的例子,我额外给出第一个数据下标为0,但id值为5的数据,那如何取得那个5呢?
全局data中需要保存两个变量,一个是当前picker的下标值变量名,一个是选中的id值。使用picker标签的绑定监听事件,获取选中的下标,再根据下标值获取对应的数组对象中的id属性。
//门磁报警数据变动监听
bindDoorChange:function(e){
console.log("门磁告警选择的数据值:" + e.detail.value);
//获取对象数组中的id值
console.log("## " + this.data.pickerCheckArrayList[e.detail.value].id)
this.setData({
checkedDoorVal: e.detail.value
});
},
如果是数组,如下所示:
<picker bindchange="bindlockMacChange" value="{{lockMacIndx}}" range="{{lockMacArrayList}}" >
<label class="label">设备编号</label>
<text class='pickerText'>{{lockMacArrayList[lockMacIndx]}}</text>
</picker>
lockMacArrayList:['11:22:33:44:55:66','11:22:33:44:55:77'],
这种方式显示