avatar

為什么要自定義picker

原生小程序picker不支持自定義樣式，無聯(lián)動(dòng)。

該自定組件

支持自定義數(shù)據(jù)

支持自定義樣式

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

支持聯(lián)動(dòng)(改變父列，子列根據(jù)關(guān)聯(lián)自動(dòng)變化)

使用

直接將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="自定義標(biāo)題"

cancelText="cancle"

sureText="sure"

>

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

參數(shù)說明

name

type

required

default

Description

isShowPicker

Boolean

?

false

顯示隱藏picker，需要在bindsure和bindcancle中手動(dòng)設(shè)為false

scrollType

String

?

'normal'

picker類型，'normal':非聯(lián)動(dòng)picker 'link':聯(lián)動(dòng)picker

listData

Array

?

[]

picker數(shù)據(jù)源,是一個(gè)數(shù)組，scrollType='normal'時(shí)，數(shù)組成員也是數(shù)組，數(shù)組成員數(shù)量就是picker列數(shù);scrollType='link'時(shí)，listData格式需為固定格式

keyWordsOfShow

String

?

'name'

當(dāng)listData的的每一個(gè)成員，是由對象組成的數(shù)組時(shí)，keyWordsOfShow作為對象的key，其value用于顯示；或者當(dāng)picker='link'時(shí)，供顯示的key

defaultPickData

Array

?

[]

設(shè)置picker默認(rèn)選擇

indicatorStyle

String

?

''

設(shè)置選擇器中間選中框的樣式(詳見picker-view)如，每一行的高度 view

maskStyle

String

?

''

設(shè)置蒙層的樣式(詳見picker-view) view

titleStyle

String

?

''

標(biāo)題欄標(biāo)題樣式 view

sureStyle

String

?

''

標(biāo)題欄確定樣式 text

cancelStyle

String

?

''

標(biāo)題欄取消樣式 text

chooseItemTextStyle

Array

?

''

設(shè)置picker列表文案樣式 text

pickerHeaderStyle

String

?

''

標(biāo)題欄樣式 view

titleText

String

?

''

標(biāo)題文案

cancelText

String

?

''

取消按鈕文案

sureText

String

?

''

確定按鈕文案

bindsure

EventHandle

?

無

點(diǎn)擊確定觸發(fā)的事件，event.detail = value

bindcancle

EventHandle

?

無

點(diǎn)擊取消觸發(fā)的事件

注意

必須在bindsure和bindcancle中將isShowPicker設(shè)為false。

scrollType='normal'時(shí)，listData數(shù)據(jù)結(jié)構(gòu)代碼如下；當(dāng)?shù)诙S數(shù)組的成員為對象時(shí)，需指定用于顯示的key(通過keyWordsOfShow屬性)，默認(rèn)為'name'。若要設(shè)置默認(rèn)選中，設(shè)置 defaultPickData=[第一選中的列索引,第二選中的列索引,第三選中的列索引,...]，如[1,2,1]

//listData數(shù)據(jù)結(jié)構(gòu)

[

[對象或者普通類型],

[對象或者普通類型],

[對象或者普通類型],

...

]

scrollType='link'時(shí)，listData數(shù)據(jù)結(jié)構(gòu)代碼如下，"children"字段為必須；'用于顯示的key'對應(yīng)keyWordsOfShow屬性。若要設(shè)置默認(rèn)選中，設(shè)置 defaultPickData = [{第一列選中項(xiàng)對應(yīng)的唯一key:value}, {第二列選中項(xiàng)對應(yīng)的唯一key:value}, {第三列選中項(xiàng)對應(yīng)的唯一key:value},...]，如[{id:2},{id:21},{id:213}]

//listData數(shù)據(jù)結(jié)構(gòu)

[

{

用于顯示的key:'',

children:[

{

用于顯示的key:'',

children:[

{

用于顯示的key:'',

children:[

],

其他屬性...,

}

],

其他屬性...,

},

...

],

其他屬性...,

},

...

]

更新日志

0.0.1 初始化項(xiàng)目。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。