avatar

為什么要自定義picker

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

該自定組件

支持自定義數據

支持自定義樣式

支持傳入和返回對象或者基本類型

支持聯動(改變父列，子列根據關聯自動變化)

使用

直接將picker文件夾拖入工程

在某page的json文件中配置

{

"usingComponents": {

"picker": picker.js的相對路徑

}

}

在page的wxml文件中使用

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"

>

更多使用方式，可自行參考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 初始化項目。

總結

以上是生活随笔為你收集整理的小程序picker标题_微信小程序-自定义picker选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。