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

picker

功能描述

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

通用属性

mode：选择器类型

普通选择器：mode = selector

代码示例（在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>
1
2
3
4
5
6
7
8
9
10
11
12
13

• .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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• .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,'选中的数据')
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46