UICustomPicker

论坛示例

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

概述

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/07/31