UICustomPicker

open

close

show

hide

setValue

refreshData

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

UICustomPicker 插件是一个自定义内容选择器；可自定义插件位置、内容取值范围、内容标签，设置选中内容；可用于实现固定取值范围的内容选择器，多项内容之间没有级联关系；同一个页面可以打开多个插件实例，以插件 id 区分。

图片说明

# **open**

打开自定义选择器

open({params}, callback(ret, err))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）插件的位置及尺寸
  • 内部字段：
{
    x: 0,   //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
    y: 0,   //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
    w: 320, //（可选项）数字类型；插件的宽度；默认：所属的 Window 或 Frame 的宽度
    h: 480  //（可选项）数字类型；插件的高度；默认：所属的 Window 或 Frame 的高度
}

styles：

  • 类型：JSON 对象
  • 描述：（可选项）插件各部分的样式
  • 内部字段：
{
    bg: 'rgba(0,0,0,0)',        //（可选项）字符串类型；选中内容区域的背景，支持 rgb，rgba，#，图片路径（本地路径，fs://、widget://）；默认：'rgba(0,0,0,0)'
    normalColor: '#959595',     //（可选项）字符串类型；未选中内容的字体颜色，支持 rgb，rgba，#；默认：'#959595'
    normalSize:15,              //（可选项）数字类型；未选中内容字体大小；默认：15
    selectedColor: '#3685dd',   //（可选项）字符串类型；选中内容的字体颜色，支持 rgb，rgba，#；默认：'#3685dd'
    disableSelectColor: '#EDEDED',//（可选项）字符串类型；不可选中项的字体颜色，支持 rgb，rgba，#；默认：'#EDEDED'
    selectedSize: 36,           //（可选项）数字类型；选中内容的字体大小；默认：36.0
    tagColor: '#3685dd',        //（可选项）字符串类型；内容标签的字体颜色，支持 rgb，rgba，# ；默认：'#3685dd'
    tagSize: 12,                //（可选项）数字类型；内容标签的字体大小；默认：12
    tagMarginR:10,              //（可选项）数字类型；标签距离当前picker的右边框的距离；默认：0
    pickersWidth:[60, 20, 20]   //（可选项）数组类型；picker所占插件宽度的百分比，不传时均分插件宽度，数组长度等于data数组的长度
}

data：

  • 类型：JSON 对象
  • 描述：自定义选择器的标签和内容取值范围；若数组长度大于1，则显示多个选择器实例，彼此仍是一个整体，各个实例宽度 = 插件整体宽度（w）/ 实例个数
  • 内部字段：
[{
    tag: '时',          //（可选项）字符串类型；内容标签；不传或传空则不显示
    scope: '0-23'       //内容的取值范围
                        //支持字符串类型，如：'0-23' ，表示取值范围为0至23，中间符号为英文连字符'-'，只有整数范围可以如此传参
                        //支持数组类型，如：['一','二','三','四']，表示内容取值范围包含在数组之内
                        //支持数组类型，如：[{value:'一',id:1},{value:'二',id:2},{value:'三',id:3},{value:'四',id:4}]，表示内容取值包含在 JSON 对象组成的数组之内，其中 value 为必须传键值。其余可自定义，此 JSON 对象会在 callback 内回调给前端
}]

disableSelect：

  • 类型：JSON对象
  • 描述：（可选项）设置不可选项，与 data 对应，若不传则不设置不可选项
  • 内部字段：
[{
    scope: '0-23'      //支持数组类型，如：['一','二','三','四']或[{value:'一',id:1},{value:'二',id:2},{value:'三',id:3},{value:'四',id:4}]，表示设置不可被中选项的内容
}]

rows：

  • 类型：数字
  • 描述：（可选项）滚动内容时可见的内容行数，只接受大于1的奇整数。
  • 默认值：3

autoHide：

  • 类型：布尔
  • 描述：（可选项）选中内容时，上下选项是否自动隐藏
  • 默认值：true

loop：

  • 类型：布尔
  • 描述：（可选项）是否循环滚动。如果内容的取值范围的个数小于rows参数的值，那么无论loop设置为true或是false，均不可循环滚动
  • 默认值：true

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：插件依附于当前 window

fixed:

  • 类型：布尔
  • 描述：（可选项）插件是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    id: 0,                  //数字类型；插件的 id，用于区分插件的多个实例
    eventType: 'show',      //字符串类型；交互事件类型
                            //取值范围：
                            //show（插件打开成功）
                            //selected（选择器选中内容）
    data: ['12','30']       //数组类型；选择器选中的内容数组，内部元素与源数据保持一致
}

示例代码

var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.open({
    rect: {
        x: 30,
        y: api.frameHeight / 2 - 170,
        w: api.frameWidth - 60,
        h: 340
    },
    styles: {
        bg: 'rgba(0,0,0,0)',
        normalColor: '#959595',
        selectedColor: '#3685dd',
        selectedSize: 36,
        tagColor: '#3685dd',
        tagSize: 10
    },
    data: [{
        tag: '时',
        scope: '0-23'
    }, {
        tag: '分',
        scope: ['a', 'b', 'c', 'd']
    }],
    rows: 3,
    fixedOn: api.frameName,
    fixed: true
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

# **close**

关闭自定义选择器

close({params})

params

id：

  • 类型：数字
  • 描述：插件的 id，用于区分插件的多个实例

示例代码

var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.close({
    id: 0
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

# **show**

显示自定义选择器

show({params})

params

id：

  • 类型：数字
  • 描述：插件的 id，用于区分插件的多个实例

示例代码

var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.show({
    id: 0
});

可用性

iOS系统

可提供的1.0.0及更高版本

# **hide**

隐藏自定义选择器

hide({params})

params

id：

  • 类型：数字
  • 描述：插件的 id，用于区分插件的多个实例

示例代码

var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.hide({
    id: 0
});

可用性

iOS系统

可提供的1.0.0及更高版本

# **setValue**

设置自定义选择器当前选中的内容

setValue({params})

params

id：

  • 类型：数字
  • 描述：插件 id，用于区分多个插件实例

data：

  • 类型：数组
  • 描述：设置选择器选中项的内容组成的数组，数组某一项为空或不传，表示不改变对应列的值

示例代码

var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.setValue({
    id: 0,
    data: ['12', '30']
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

# **refreshData**

刷新数据源

refreshData({params})

params

id：

  • 类型：数字
  • 描述：制定刷新的插件id

data：

  • 类型：JSON 对象
  • 描述：刷新自定义选择器的标签和内容；本数组长度必须和 open 接口内 data 参数数组长度一致，传空则表示不刷新该元素对应的列。如：[{*****},'',{*******}]，表示不刷新第二列选择器
  • 内部字段：
[{
    tag: '时',          //（可选项）字符串类型；内容标签；不传或传空则不显示
    scope: '0-23'       //内容的取值范围
                        //支持字符串类型，如：'0-23' ，表示取值范围为0至23，中间符号为英文连字符'-'，只有整数范围可以如此传参
                        //支持数组类型，如：['一','二','三','四']，表示内容取值范围包含在数组之内
                        //支持数组类型，如：[{value:'一',id:1},{value:'二',id:2},{value:'三',id:3},{value:'四',id:4}]，表示内容取值包含在 JSON 对象组成的数组之内，其中 value 为必须传键值。其余可自定义，此 JSON 对象会在 callback 内回调给前端
}]

示例代码

var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.refreshData({
    id: 0,
    data: [{
        tag:'大写',
        scope:[
           {value:'一',id:1},
           {value:'二',id:2},
           {value:'三',id:3},
           {value:'四',id:4}
        ]
    },{
        tag:'汉子',
        scope:[
           {value:'壹',id:1},
           {value:'贰',id:2},
           {value:'叁',id:3},
           {value:'肆',id:4}
        ]
    }]
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18