微信小程序-自定義picker選擇器

github地址

爲何要自定義picker

原生小程序picker不支持自定義樣式，無聯動。
該自定組件

• 支持自定義數據
• 支持自定義樣式
• 支持傳入和返回對象或者基本類型
• 支持聯動（改變父列，子列根據關聯自動變化）

使用

• 直接將picker文件夾拖入工程
• 在某page的json文件中配置

{
  "usingComponents": {
    "picker": picker.js的相對路徑
  }
}

• 在page的wxml文件中使用

<picker
    isShowPicker="{{isShow_02}}"
    bind:sure="sureCallBack_02"
    bind:cancle="cancleCallBack_02"
    scrollType="normal"
    listData="{{listData_02}}"
    indicatorStyle="height:80px"
    maskStyle=""
    titleStyle=""
    sureStyle="color:blue;font-size:16px;"
    cancelStyle="color:red;font-size:16px;"
    chooseItemTextStyle="color:green;"
    pickerHeaderStyle="background:#eee;"
    titleText="自定義標題"
    cancelText="cancle"
    sureText="sure"
></picker>

• 更多使用方式，可自行參考demo

參數說明

name	type	required	default	Description
isShowPicker	Boolean	✓	false	顯示隱藏picker，須要在bindsure和bindcancle中手動設爲false
scrollType	String	✗	'normal'	picker類型，'normal':非聯動picker 'link':聯動picker
listData	Array	✓	[]	picker數據源,是一個數組，scrollType='normal'時，數組成員也是數組，數組成員數量就是picker列數;scrollType='link'時，listData格式需爲固定格式
keyWordsOfShow	String	✗	'name'	當listData的的每個成員，是由對象組成的數組時，keyWordsOfShow做爲對象的key，其value用於顯示；或者當picker='link'時，供顯示的key
defaultPickData	Array	✗	[]	設置picker默認選擇
indicatorStyle	String	✗	''	設置選擇器中間選中框的樣式（詳見picker-view）如，每一行的高度 view
maskStyle	String	✗	''	設置蒙層的樣式（詳見picker-view） view
titleStyle	String	✗	''	標題欄標題樣式 view
sureStyle	String	✗	''	標題欄肯定樣式 text
cancelStyle	String	✗	''	標題欄取消樣式 text
chooseItemTextStyle	Array	✗	''	設置picker列表文案樣式 text
pickerHeaderStyle	String	✗	''	標題欄樣式 view
titleText	String	✗	''	標題文案
cancelText	String	✗	''	取消按鈕文案
sureText	String	✗	''	肯定按鈕文案
bindsure	EventHandle	✗	無	點擊肯定觸發的事件，event.detail = value
bindcancle	EventHandle	✗	無	點擊取消觸發的事件

注意

• 必須在bindsure和bindcancle中將isShowPicker設爲false。

• scrollType='normal'時，listData數據結構代碼以下；當第二維數組的成員爲對象時，需指定用於顯示的key(經過keyWordsOfShow屬性)，默認爲'name'。若要設置默認選中，設置 defaultPickData=[第一選中的列索引,第二選中的列索引,第三選中的列索引,...]，如[1,2,1]

  //listData數據結構
   [ 
     [對象或者普通類型], 
     [對象或者普通類型], 
     [對象或者普通類型], 
     ...
     ]

• scrollType='link'時，listData數據結構代碼以下，"children"字段爲必須；'用於顯示的key'對應keyWordsOfShow屬性。若要設置默認選中，設置 defaultPickData = [{第一列選中項對應的惟一key:value}, {第二列選中項對應的惟一key:value}, {第三列選中項對應的惟一key:value},...]，如[{id:2},{id:21},{id:213}]

//listData數據結構
 [
   {
     用於顯示的key:'',
     children:[
       {
          用於顯示的key:'',
          children:[
            {
              用於顯示的key:'',
              children:[
                      
              ],
              其餘屬性...,
             }      
          ],
          其餘屬性...,
       },
       ...
     ],
     其餘屬性...,
   },
   ...
 ]

更新日誌

• 0.0.1 初始化項目。

組件源碼和demo請參考github地址