微信小程序选择器picker的使用（selector 普通选择器）

picker

功能描述

从底部弹起的滚动选择器。就是类似于element-ui中的下拉选择器

通用属性

mode：选择器类型

和法值	说明
selector	普通选择器
multiSelector	多列选择器
time	时间选择器
date	日期选择器

普通选择器：mode = selector

属性名	说明
range	mode 为 selector 或 multiSelector 时，range 有效
range-key	当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	表示选择了 range 中的第几个（下标从 0 开始）
bindchange	value 改变时触发 change 事件，event.detail = {value}

代码示例（在form中使用）

range：就是选择器的数据源
range-key：当数据源的数据类型为数组嵌套对象时，需要 加上 range-key，否则滑动时页面显示的数据就为 object object 这种了
value：是选中的数据的下标，当有默认选中数据时，可以给value赋值
name：form表单的属性，在form中使用时，写上name 可在表单提交时，拿到选中的值，单这里同element-ui中的选择器不同，这里拿到的数据，是对应数据的下标，并不是对应的value
所以下面的formSubmit方法中 e.detail.value 中的 country 是 选中数据的下标，但一般提交给后端数据时，以下文的 objectArray数据为例子 传给后端的是 id。所以在提交表单时，需要处理下

• .wxml

<view class="box">
  <form bindsubmit="formSubmit">
    <view class="form-item">
      <text class="head">国家选择：</text>
      <picker mode="selector" bindchange="bindPickerChange" name="country"  range-key="name" value="{{index}}" range="{{objectArray}}">
        <view class="head pic">
          {{objectArray[index].name}}
        </view>
      </picker>
    </view>
    <button form-type="submit" type="primary">提交</button>
  </form>
</view>

• .wxss

.box{
  padding: 30rpx;
}
.form-item{
  display: flex;
  background-color: rgb(221, 230, 230);
  margin-bottom: 10rpx;
  border-radius: 30rpx;
}
.head{
  line-height: 100rpx;
  margin-left: 30rpx;
}
.tail{
  height: 100rpx;
}
.pic{
  height: 100rpx;
  width: 500rpx;
  margin-left: -2rpx;
}

• .js

// pages/shoppingCart/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    index:'', //选中的下标
    selectedObject: {}, // 用于存储选中的对象
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    formData:{}
  },
  // 表单提交的
  formSubmit(e) {
    this.setData({
      formData:e.detail.value
    })
    console.log(this.data.formData)
  },
  // 选择器选择的
  bindPickerChange(e){
   console.log(e)
   this.setData({
     index:e.detail.value,
     selectedObject:this.data.objectArray[e.detail.value]
   })
   console.log(this.data.selectedObject,'选中的数据')
  },
})