微信小程序开发----Picker中range属性及其他的理解

微信小程序开发文档中针对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中range属性及其他的理解

转载于:https://www.cnblogs.com/shimily/articles/10702011.html

微信小程序开发----Picker中range属性及其他的理解

相关推荐