mpx-cube-ui

# Cube-Picker

# 介绍

Picker 组件也就是选择器，可以用于实现单列或多列选项的选择。

对于选择器，最基本的是需要定义它可以选择的选项，定义选项的属性是 list ，它是一个二维数组，第一维度代表了有多少列，第二维度则代表了每列有哪些选项。

# 示例

# 单列选择器

通过配置list并传入一组数据，则生成一列选择器。

收起 
<template>
  <view class="picker-wrapper">
    <view class="picker-demo-title">basic-picker:</view>
    <cube-picker
      list="{{dataList}}"
      selected-index="{{selectedIndex}}"
      bindcolumnChange="onColumnChange"
      bindchange="onChange"
    />
    <view class="event-params" wx:if="{{ changeParams.length }}">
      <view class="key">columnChange 事件参数：</view>
      <view class="value">
        <view class="value-item" wx:for="{{columnChangeParams}}"  wx:key="index">
          <view class="item-key">{{item[0]}}</view>
          <view class="item-value">{{item[1]}}</view>
        </view>
      </view>
      <view class="key">change 事件参数：</view>
      <view class="value">
        <view class="value-item" wx:for="{{changeParams}}" wx:key="index">
          <view class="item-key">{{item[0]}}</view>
          <view class="item-value">{{item[1]}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'
import { beauty } from '../../common/utils'
createComponent({
  data: {
    selectedIndex: [1],
    dataList: [
      [ { text: '剧毒', value: '剧毒' }, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' } ]
    ],
    columnChangeParams: '',
    changeParams: ''
  },
  computed: {
    isShow() {
      return  !this.columnChangeParams && !this.changeParams
    }
  },
  methods: {
    onColumnChange(e) {
      this.columnChangeParams = Object.entries(e.detail)
    },
    onChange(e) {
      this.changeParams = Object.entries(e.detail)
    }
  }
})
</script>
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
47
48
49
50
51
52
53
54
55

# 多列选择器

如果传入了多列数据，则会生成相应的多列选择器。比如以下是一个三列的选择器：

收起 
<template>
  <view class="multi-picker-wrapper">
    <view class="picker-demo-title">multi-picker:</view>
    <cube-picker
      list="{{dataList}}"
      selected-index="{{selectedIndex}}"
      bindcolumnChange="onColumnChange"
      bindchange="onChange"
    />
    <view class="event-params" wx:if="{{ changeParams.length }}">
      <view class="key">columnChange 事件参数：</view>
      <view class="value">
        <view class="value-item" wx:for="{{columnChangeParams}}"  wx:key="index">
          <view class="item-key">{{item[0]}}</view>
          <view class="item-value">{{item[1]}}</view>
        </view>
      </view>
      <view class="key">change 事件参数：</view>
      <view class="value">
        <view class="value-item" wx:for="{{changeParams}}" wx:key="index">
          <view class="item-key">{{item[0]}}</view>
          <view class="item-value">{{item[1]}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'
import { beauty } from '../../common/utils'

createComponent({
  data: {
    selectedIndex: [0, 1, 0],
    dataList: [
      [ { text: '剧毒', value: '剧毒' }, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' } ],
      [ { text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心' } ],
      [ { text: '梅肯', value: '梅肯' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' } ]
    ],
    columnChangeParams: '',
    changeParams: ''
  },
  computed: {
    isShow() {
      return  !this.columnChangeParams && !this.changeParams
    }
  },
  methods: {
    onColumnChange(e) {
      this.columnChangeParams = Object.entries(e.detail)
    },
    onChange(e) {
      this.changeParams = Object.entries(e.detail)
    }
  }
})
</script>
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
47
48
49
50
51
52
53
54
55
56
57
58

# 更新数据及获取数据

当你需要修改 Picker 某些配置项时，你可以使用实例方法 updateData，传入你需要更新的属性。

当你需要获取 Picker 当前选择项时，你可以使用实例方法 getSelectedInfo。

收起 
<template>
  <view class="update-data-picker-wrapper">
    <view class="picker-demo-title">update-data-picker:</view>
    <cube-picker
      wx:ref="picker"
      list="{{dataList}}"
      selected-index="{{selectedIndex}}"
    />
    <view class="button-wrapper">
      <cube-button bindclick="update">更新选项</cube-button>
    </view>
    <view class="button-wrapper">
      <cube-button bindclick="getSelected">获取选中值</cube-button>
    </view>
    <view class="demo-data" wx:if="{{ selectedInfo.length }}">
      <view class="value">
        <view class="value-item" wx:for="{{selectedInfo}}" wx:key="index">
          <view class="item-key">{{item[0]}}</view>
          <view class="item-value">{{item[1]}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'
import { beauty } from '../../common/utils'

createComponent({
  data: {
    dataList: [
      [ { text: '剧毒', value: '剧毒' }, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' } ],
      [ { text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心' } ],
    ],
    selectedIndex: [1, 2],
    selectedInfo: ''
  },
  computed: {
    isShow() {
      return  !this.selectedInfo
    }
  },
  methods: {
    update() {
      this.$refs.picker.updateData([
        [ { text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心' } ],
        [ { text: '梅肯', value: '梅肯' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' } ]
      ], [2, 0])
    },
    getSelected() {
      this.selectedInfo = Object.entries(this.$refs.picker.getSelectedInfo())
    }
  }
})
</script>
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
47
48
49
50
51
52
53
54
55
56

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
list 传入 picker 数据，数组的长度决定了 picker 的列数 Array - PickerColumn[]
selectedIndex 被选中的索引值，拉起 picker 后显示这个索引值对应的内容 Array - number[]
immediateChange 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。 微信 webview 特有属性，基础库 2.21.1 及以上； 支付宝需基础库 2.8.7 及以上 Boolean - false

# TsType

Name Type
PickerColumn 
{
  order?: number;
  text: string|number;
  value: any;
}[]

# Events

事件名 说明 参数
pickstart 当滚动选择开始时候触发事件 -
pickend 当滚动选择结束时候触发事件 -
columnChange 列变化事件，某列选中的 value 及 index 任意一个变化后触发事件 event.detail = { column, index, text, value } column 是发生变化的列；index, text, value 分别是变化后的索引、文案、值
change 滚动后触发 event.detail = { selectedIndex, selectedText, selectedVal } 每个属性都是数组，是当前所有列的选中信息； 分别表示被选中的索引、文案、值

# Methods

组件实例方法 说明 参数 1 参数 2 返回值
updateData 更新 picker 的数据及选中值 list 为每一列的数据 index 为每一列的数据选中的索引 -
updateList 更新 picker 的数据 list 为每一列的数据 - -
updateIndex 更新 picker 的选中值 index 为每一列的数据选中的索引 - -
getSelectedInfo 获取当前所有列的选中信息 - - { selectedIndex, selectedText, selectedVal } 每个属性都是数组，是当前所有列的选中信息； 分别表示被选中的索引、文案、值。

# CSS Variable

变量名 默认值 含义
$picker-wheel-item-font-size picker 可选项字体大小
$picker-bgc picker 面板的颜色
$picker-color picker 可选项字体颜色
$picker-content-height
173px
 picker 面板的高度
$picker-wheel-item-height
36px
 picker 可选项高度

← CascadePicker 级联选择器 →