【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）省、市、區數據源由組件自動生成，無需提供。