【picker】选择器组件说明

picker从底部弹起选择器组件

组件细节:

1) 该组件有五种类型,分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。

2) 组件内必需包裹内容,不然无法弹出选项

<!-- 采用wxs提供数据源更直观显示 -->
<wxs module="picker">
  module.exports.items=['美国', '德国', '英国', '法国'];
</wxs>

<!-- 点击灰色的选择器无法弹出,因为其内部没有包裹内容 -->
<picker mode="selector" value="0" style="background:#ccc;width:300px;height:100px;" range="{{picker.items}}">
</picker>

<!-- 点击红色选择器内文字可以弹出 -->
<picker mode="selector" value="0" style="background:#f00;width:300px;height:100px;" range="{{picker.items}}"> <view>点我这一行可以弹出</view> </picker>

3) 五类选择器默认返回值不同(值也可以通过JS脚本进行更改):

    普通选择器:[Number] 当前选项的序号值,第一项序号为0,以次累推

    多列选择器:[Array] 元素值是每一列的选择项的序号值

    时间选择器:[String] 格式 hh:mm

    日期选择器:[String] 格式 YYYY-MM-DD

    省市区选择器: [Array] 格式 [ 省名称, 市名称, 区名称 ]

 

五种类型:

1、 普通选择器: mode="selector"

原型:

<picker
    mode="selector"
    value="[String]"
    range="[Array | Object Array]"
    range-key="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"    
>
</picker>

 

属性:

名称 是否必需 类型 默认值 说明
mode [String] selector 固定值为selector表示是普通的选择器
range [Array | Object Array] []

初始化选择器选项的数据源

值类型为Array时,数组的每一个元素为选择器的选项列表

值类型为Object Array时,要求指明range-key,做为选项列表值

range [String]  

当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value [String] 空值

选择器默认值。

其值默认为选项的序号值(第一项序号为0,以次类推)

如果想自定义其值,可以通过JS设置此属性值

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

 

2、多列选择器:mode="multiSelector"

原型:

<picker
    mode="multiSelector"  
    value="[Array]"
    range="[二维Array / 二维Object Array]"
    range-key="[String]"
    disabled="[boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
    bindcolumnchange="[EventHandle]"
>
</picker>

 

 属性:

名称 是否必需 类型 默认值 说明
mode [String] multiSelector 固定值为multiSelector表示是多列选择器
range [Array | Object Array] []

初始化选择器选项的数据源

mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]]

range [String]  

当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value [Array] []

选择器默认值。

如果想自定义其值,可以通过JS设置此属性值

value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcolumnchange [EventHandle]  

某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

 

3、时间选择器:mode="time"

原型:

<picker
    mode="time"
    value="[String]"
    start="[Date]"
    end="[Date]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
>
</picker>

 

属性:

名称 是否必需 类型 默认值 说明
mode [String] time 固定值为time表示是普通的选择器
start [String]  

有效时间范围的开始,字符串格式为"hh:mm"

end [String]  

有效时间范围的结束,字符串格式为"hh:mm"

value [String]  

表示选中的时间,格式为"hh:mm"

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

 

4、日期选择器:mode="date"

原型:

<picker
    mode="date"
    start="[String]"
    end="[String]"
    fields="[day | month | year]"
    value="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
>
</picker>

 

属性:

名称 是否必需 类型 默认值 说明
mode [String] date 固定值为date表示是普通的选择器
start [String]  

有效日期起始范围,格式为"YYYY-MM-DD"

end [String]  

有效日期结束范围,格式为"YYYY-MM-DD"

fields [day | month | year] day

有效值 year,month,day,表示选择器的粒度

值为day时,格式为: YYYY-MM-DD

值为month时,格式为: YYYY-MM

值为year时,格式为: YYYY

value [String] 0

表示选中的日期,格式为"YYYY-MM-DD"

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

 

5. 省市区选择器:mode="region" 

原型:

<picker
    mode="region"
    value="[Array]"
    custom-item="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
>
</picker>

 

属性:

名称 是否必需 类型 默认值 说明
mode [String] regio 固定值为regio表示是普通的选择器
value [Array] []

表示选中省市区,格式:[省, 市, 区]

custom-item [String]   可为每一列的顶部添加一个自定义的项(比如全部,或者请选择)
disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

 

注意:

1) 该选择器显示三列类型选项,分别是省、市、区。

2)该选择器的显示是[省份名称, 市名称, 区名称]。

3)省、市、区数据源由组件自动生成,无需提供。

 

posted @ 2018-11-09 20:44  1024记忆  阅读(4766)  评论(0编辑  收藏  举报