# Picker 滚动选择器
请扫码查看示例
# 介绍
嵌入页面的滚动选择器，支持单列选择和多列级联，通常与 弹出层 组件配合使用。
# 引入
APP内置组件，可直接使用cross-view标签。
# 代码演示
# 基本用法
通过设置 crossprops 和 type 属性,展示选择器。
# 1、单列选择
<cross-view id="cross-view_picker_1" class="cross-view" type="midea-picker" crossprops="{{picker1}}" onCallMethod="onCallMethod1"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
picker1: JSON.stringify({
config: {
textColor: '#000', // (iOS)字体颜色
backgroundColor: '#FFF', // (iOS)背景色
dividerColor: '#E5E5E8', // (Android)分割线颜色
type: '0', // 0 普通picker
wheelList: [
{
index: 0,
isLoop: 0,
textSize: 18,
label: '℃', // 单位文案
labelTextColor: '#8A8A8F', //单位字体颜色
labelTextSize: '14', //单位字体大小
itemList: Array.apply(null, { length: 10 }).map((v, k) => { // 每列显示数据
return {
id: k,
name: k,
pid: 0
}
})
}
]
}
})
},
/**
* 原生回调方法
*/
onCallMethod1({method, params}) {
switch(method){
case "mideaPickerChange":{
console.log(JSON.stringify(params))
if (params.result === 'success') {
prompt.showToast({
message: typeof(params.data) == "string" ? (JSON.parse(params.data))[0].name : params.data[0].name
})
}
} break;
default:{
prompt.showToast({
message: typeof(params) == "string" ? params : JSON.stringify(params)
})
}
}
}
}
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
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
# 2、双列选择(时间)
<cross-view id="cross-view_picker_2" class="cross-view" type="midea-picker" crossprops="{{picker2}}" onCallMethod="onCallMethod2"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
picker2: JSON.stringify({
config: {
textColor: '#000', // 字体颜色
backgroundColor: '#EEE', //picker背景色
dividerColor: '#FFF', // 分割线颜色
type: '3', // 3 时间
value: '',
wheelList: [
{
index: 0,
isLoop: 0,
textSize: 20,
label: '小时',
labelTextColor: '#8A8A8F',
labelTextSize: '14',
itemList: Array.apply(null, { length: 23 }).map((v, k) => {
return {
id: k,
name: k+1,
pid: 0
}
})
},
{
index: 0,
isLoop: 1,
textSize: 20,
label: '分', // 单位名字
labelTextColor: '#8A8A8F', //单位颜色
labelTextSize: '14', //单位字体大小
itemList: Array.apply(null, { length: 60 }).map((v, k) => {
return {
id: k,
name: k < 10 ? '0' + k : '' + k,
pid: 0
}
})
}
]
}
})
},
/**
* 原生回调方法
*/
onCallMethod2({method, params}) {
switch(method){
case "mideaPickerChange":{
console.log(JSON.stringify(params))
if (params.result === 'success') {
let data = params.data
data = typeof data === 'string' ? JSON.parse(data) : data
let delayTime = parseInt(data[0].name) * 3600 + parseInt(data[1].name) * 60 + parseInt(data[2].name)
prompt.showToast({
message: delayTime
})
}
} break;
default:{
prompt.showToast({
message: typeof(params) == "string" ? params : JSON.stringify(params)
})
}
}
}
}
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
59
60
61
62
63
64
65
66
67
68
69
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
59
60
61
62
63
64
65
66
67
68
69
# 3、三列选择(日期)
通过wheelList设置滚动列数，itemMaps设置联动数据
<cross-view id="cross-view_picker_3" class="cross-view" type="midea-picker" crossprops="{{picker3}}" onCallMethod="onCallMethod3"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
picker3: JSON.stringify({
config: {
loop: true, // ?未生效
textColor: '#000000',
backgroundColor: '#ffffff',
dividerColor: '#eeeeee',
type: '2',
value: '2022-8-18',
min: '2012-1-1',
max: '2022-12-31',
}
})
},
/**
* 原生回调方法
*/
onCallMethod3({method, params}) {
switch(method){
case "mideaPickerChange":{
console.log(JSON.stringify(params))
if (params.result === 'success') {
let data = params.data
data = typeof data === 'string' ? JSON.parse(data) : data
prompt.showToast({
message: `${data[0].name}/${data[1].name}/${data[2].name}`
})
}
} break;
default:{
prompt.showToast({
message: typeof(params) == "string" ? params : JSON.stringify(params)
})
}
}
}
}
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
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
# 4、联动选择(省市区)
<cross-view id="cross-view_picker_4" class="cross-view" type="midea-picker" crossprops="{{picker4}}" onCallMethod="onCallMethod3"></cross-view>
1
import prompt from '@system.prompt'
export default {
data: {
picker4: JSON.stringify({
config: {
loop: false,
textColor: '#000000',
backgroundColor: '#ffffff',
dividerColor: '#eeeeee',
type: '1', // 1 联动
wheelList: [
{
index: 0
},
{
index: 1
},
{
index: 2
}
],
itemMaps: [
{ id: 1, pId: 0, name: '北京' },
{ id: 101, pId: 1, name: '北京' },
{ id: 1011, pId: 101, name: '朝阳区' },
{ id: 1012, pId: 101, name: '密云区' },
{ id: 2, pId: 0, name: '广东' },
{ id: 201, pId: 2, name: '广州' },
{ id: 2011, pId: 201, name: '天河区' },
{ id: 2012, pId: 201, name: '越秀区' },
{ id: 202, pId: 2, name: '深圳' },
{ id: 2021, pId: 202, name: '罗湖区' },
{ id: 2022, pId: 202, name: '福田区' },
{ id: 3, pId: 0, name: '广西' },
{ id: 301, pId: 3, name: '南宁' },
{ id: 3011, pId: 301, name: '宾阳县' },
{ id: 3012, pId: 301, name: '横县' },
{ id: 302, pId: 3, name: '北海' },
{ id: 3021, pId: 302, name: '海城区' },
{ id: 3022, pId: 302, name: '银海区' },
{ id: 4, pId: 0, name: '新疆维吾尔自治区' },
{ id: 401, pId: 4, name: '喀什地区' },
{ id: 4011, pId: 401, name: '喀什市' },
{ id: 4012, pId: 401, name: '巴楚县和塔什库尔干塔吉克自治县' },
{ id: 402, pId: 4, name: '克孜勒苏柯尔克孜自治州' },
{ id: 4021, pId: 402, name: '阿图什市' },
{ id: 4022, pId: 402, name: '阿克陶县' }
]
}
})
},
/**
* 原生回调方法
*/
onCallMethod3({method, params}) {
switch(method){
case "mideaPickerChange":{
console.log(JSON.stringify(params))
if (params.result === 'success') {
let data = params.data
data = typeof data === 'string' ? JSON.parse(data) : data
prompt.showToast({
message: `${data[0].name}/${data[1].name}/${data[2].name}`
})
}
} break;
default:{
prompt.showToast({
message: typeof(params) == "string" ? params : JSON.stringify(params)
})
}
}
}
}
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# Api
# Prop
提供给前端多个属性控制，包括字体颜色，背景颜色，单位颜色，选中值，滚动数据等，支持单列和多列样式的展示。通过传入 config 值来存储所有属性值。
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
type | 原生组件类型 | String | midea-picker | 是 |
crossprops | 参数 | String | config: {}附表1 | 是 |
# config（表1）
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
type | 选择器类型 0：普通 1：联动 2：日期 3：时间 4：湿度 5：联动区域 | Number | - | 是 |
textColor | 所有列选中字体颜色，如果想单独设置某列选中颜色，可以设置 wheelList 中每列 selectedTextColor 值 | String | #000000 | 否 |
backgroundColor | 背景色 | String | #FFFFFF | 否 |
dividerColor | 分割线颜色 | String | - | 否 |
value | 日期 picker 类型选中值，格式:"2021-03-01"，其他类型 picker 无值 | String | - | 否 |
min | 日期 picker 类型最小值，格式:"2021-03-01"，其他类型 picker 无值 | String | - | 否 |
max | 日期 picker 类型最大值，格式:"2021-03-01"，其他类型 picker 无值 | String | - | 否 |
itemMaps | 联动类型有值，其他类型无值 | Array | [] | 否 |
itemMaps{id} | 主键 id | Number | ||
itemMaps{name} | 内容 | String | ||
itemMaps{pId} | 所属父类型 id | Number | ||
wheelList | 普通类型选择器数据 | Array | []附表3 | 否 |
wheelList{index} | 选中的行，注意：联动类型的 picker 选中的 index = itemMaps 数组中元素的 id 值，其他类型 picker 取下标值 | Number | - | |
wheelList{isLoop} | 是否循环展示，true 表示循环，false 表示不循环 | Boolean | - | |
wheelList{selectedTextSize} | 选中的字体大小 | String | - | |
wheelList{selectedTextColor} | 选中的字体颜色 | String | - | |
wheelList{selectedTextAlpha} | 每列选中行文字透明度（范围 0-1） | Number | - | |
wheelList{normalTextSize} | 其他行字体大小 | Number | - | |
wheelList{normalTextColor} | 其他行字体颜色 | String | - | |
wheelList{normalTextAlpha} | 其他行文字透明度（范围 0-1） | Number | - | |
wheelList{label} | 单位文案 | String | - | |
wheelList{labelTextColor} | 单位字体颜色 | String | - | |
wheelList{labelTextSize} | 单位字体大小 | String | - | |
wheelList{labelEdgeType} | 边距类型（上：’top‘，中：‘center’，下：‘bottom’） | String | - | |
wheelList{labelTopEdge} | 上边距（值是正数，下移；值是负数，上移） | Number | - | |
wheelList{labelLeftEdge} | 左边距（值是正数，右移；值是负数，左移） | Number | - | |
wheelList{ruleList} | 每列单位规则 | Array | []附表2 | |
wheelList{itemList} | 每列显示的数据 | Array | []附表3 |
# ruleList（表2）
| 字段 | 说明 | 类型 |
|---|---|---|
text | 单位文案 | String |
textColor | 单位颜色 | String |
min | 最小值 | Number |
max | 最大值 | Number |
# itemList（表3）
| 字段 | 说明 | 类型 |
|---|---|---|
id | 主键 id | String |
name | 内容 | String |
pId | 父类型 id | String |
# Events
| 名称 | 说明 | 回调参数 |
|---|---|---|
onCallMethod | 原生回调成功触发 | {method, params}附表4 |
# method回调方法（表4）
| 方法名称 | 说明 | 回调参数 |
|---|---|---|
mideaPickerChange | 选择器选中值发生改变时触发 | - |