miniprogram picker
Release 1.0.7
bindcolumnchange Ereignis überwachen, um die Werte von range und value manuell zu ändern und die Verknüpfungsänderung des Pickers abzuschließen ist ziemlich mühsam und trägt nicht zur Duplizierung in verschiedenen Geschäftslogiken bei.sourceData lediglich eine feste Datenstruktur bereitstellen und einige notwendige Konfigurationen durchführen. Diese Komponente kann Entwicklern automatisch bei der Handhabung der Verknüpfungslogik helfen.2.2.1 oder höher und开发者工具1.02.1808300 oder höher. Das Miniprogramm unterstützt die Verwendung von npm zur Installation von Paketen von Drittanbietern. 
| Eigentum | veranschaulichen | Typ | Standardwert | Ist es erforderlich? |
|---|---|---|---|---|
| Quelldaten | Das Quellarray, sourceData hat mehrere Dimensionen und Picker kann mehrere Ebenen haben. Das Format muss eine Sammlung von Arrays und Objekten sein, siehe Beispiel | Array | [] | WAHR |
| Schritte | Pickers Auftrag | Nummer | 1 | FALSCH |
| angezeigter Feldname | Feldname zur Anzeige von Daten | Zeichenfolge | 'Name' | FALSCH |
| subsetFieldName | Der Feldname des untergeordneten Knotens. Der Wert dieses Felds ist das Array der nächsten Ebene von Picker. | Zeichenfolge | 'Teilmenge' | FALSCH |
| otherNeedFieldsName | Entwickler können andere Felder, die zurückgegeben werden müssen, entsprechend ihren Anforderungen anpassen. | Array | [] | FALSCH |
| defaultIndex | Das tiefgestellte Array der standardmäßig ausgewählten Elemente, das Vorrang vor defaultValue hat | Array | [] | FALSCH |
| Standardwert | Das Wertearray des standardmäßig ausgewählten Elements. Wenn dieses Attribut aktiviert ist, ist defaultValueUniqueField erforderlich. | Array | [] | FALSCH |
| defaultValueUniqueField | Das einzige Feld des Wertearrays des standardmäßig ausgewählten Elements, das zum Vergleich mit dem Quellarray verwendet wird | Zeichenfolge | '' | - |
| autoSelect | Muss während der Initialisierung automatisch das bindchange-Ereignis aufgerufen werden, um die Ergebnisse an den Entwickler zurückzugeben? | Boolescher Wert | FALSCH | FALSCH |
| initColumnSelectedIndex | Nachdem die n-te Spalte ausgewählt wurde, wird der ausgewählte Wert der Spalte größer als n automatisch auf 0 initialisiert | Boolescher Wert | FALSCH | FALSCH |
| deaktiviert | Ob deaktiviert werden soll | Boolescher Wert | FALSCH | FALSCH |
| Verfahren | veranschaulichen | Typ | Ereignisobjekt |
|---|---|---|---|
| bindchange | Wird ausgelöst, wenn der Benutzer auf „Bestätigen“ klickt | EventHandle | event.detail = {selectedIndex, selectedArray} |
| bindcancel | Wird ausgelöst, wenn der Benutzer auf „Abbrechen“ klickt | EventHandle | event.detail ist das Ereignisobjekt, wenn bindcancel der nativen Komponente ausgelöst wird. |
| bindcolumnchange | Wird ausgelöst, wenn sich der Wert einer Spalte ändert, wenn der Benutzer darüber gleitet | EventHandle | event.detail ist das Ereignisobjekt, wenn bindcolumnchange der nativen Komponente ausgelöst wird. |
sourceData ist ein sourceData , bei dem es sich um eine Sammlung von Array-Objektstrukturen mit mehreren Dimensionen handelt, und Picker kann mehrere Ebenen haben.steps müssen Sie die Picker-Reihenfolge explizit angeben. Für eine dreistufige Verknüpfung legen Sie beispielsweise steps: 3 .steps auf 3 festgelegt ist und sourceData dieser Reihenfolge entsprechen muss.initColumnSelectedIndex aktiviert wurde, schlägt das Entwickler-Debugging-Tool fehl. Bisher wurde jedoch kein Problem auf dem realen Computer festgestellt, sodass es dem Entwickler überlassen bleibt, zu entscheiden, ob es aktiviert wird oder nicht.bindchange ausgelöstes Ereignisobjekt:selectedIndex : Index-Array der Picker-Auswahl;selectedArray : Wertearray von Picker-Auswahlelementen;bindchange , bindcancel , bindcolumnchange , disabled . Einzelheiten finden Sie im Quellcode. Installieren Sie das miniprogram-picker -Paket.
Erinnerung: Wenn Sie npm nicht verwenden möchten, können Sie das neueste Release-Paket auch direkt herunterladen und in
componentsdes Projekts einfügen, genau wie Sie selbst geschriebene Komponenten verwenden, aber npm ist praktischer.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save Klicken Sie in den WeChat Developer Tools auf die Menüleiste: Tools -> Build npm. Zu diesem Zeitpunkt werden Sie feststellen, dass es im Projekt ein zusätzliches Verzeichnis miniprogram_npm gibt, das den kompilierten miniprogram-picker enthält.
Die Drittanbieterkomponente miniprogram-picker wird in .json eingeführt. Die Verwendungsmethode ist die gleiche wie bei der Verwendung Ihrer eigenen gekapselten Komponenten, mit der Ausnahme, dass Sie nicht den spezifischen Pfad schreiben müssen, was sehr praktisch ist.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} Verwenden Sie miniprogram-picker in .wxml . Ich gebe hier zwei kleine Beispiele: Das erste ist eine dreistufige Verknüpfung und das zweite eine zweistufige Verknüpfung. Spezifische Attribute und Ereignismethoden finden Sie in der API.
miniprogram-pickerverfügt nicht über einen bestimmten Stil. Es wäre besser, wenn Sie mit der Verwendung vonslotvertraut sind. Weitere Informationen finden Sie im Slot der Miniprogrammkomponente.
< miniprogram-picker
sourceData = " {{sourceData_1}} "
steps = " {{3}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'sonValue'}} "
otherNeedFieldsName = " {{['id', 'other']}} "
defaultValue = " {{[{name: '2'}, {name: '2.2'}, {name: '2.2.1'}]}} "
defaultValueUniqueField = " {{'name'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_1 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_1}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker >
< miniprogram-picker
sourceData = " {{sourceData_2}} "
steps = " {{2}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'nextLevel'}} "
otherNeedFieldsName = " {{['code']}} "
defaultValue = " {{[{code: '0110'}, {code: '011002'}]}} "
defaultValueUniqueField = " {{'code'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_2 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_2}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker > Legen Sie sourceData fest und warten Sie auf pickerChange Ereignisse in .js .
Page ( {
/**
* 页面的初始数据
*/
data : {
result_1 : [ ] ,
result_2 : [ ] ,
sourceData_1 : [
{
id : 'id-1' ,
name : '1' ,
sonValue : [
{
id : 'id-11' ,
name : '1.1' ,
sonValue : [
{ id : 'id-111' , name : '1.1.1' } ,
{ id : 'id-112' , name : '1.1.2' }
]
} ,
{
id : 'id-12' ,
name : '1.2' ,
sonValue : [
{ id : 'id-121' , name : '1.2.1' } ,
{ id : 'id-122' , name : '1.2.2' }
]
}
]
} ,
{
id : 'id-2' ,
name : '2' ,
sonValue : [
{
id : 'id-21' ,
name : '2.1' ,
sonValue : [
{ id : 'id-211' , name : '2.1.1' } ,
{ id : 'id-212' , name : '2.1.2' }
]
} ,
{
id : 'id-22' ,
name : '2.2' ,
sonValue : [
{ id : 'id-221' , name : '2.2.1' } ,
{ id : 'id-222' , name : '2.2.2' }
]
}
]
}
] ,
sourceData_2 : [
{ name : '河北' , code : '0311' , nextLevel : [ { name : '石家庄' , code : '031101' } , { name : '保定' , code : '031102' } ] } ,
{ name : '北京' , code : '0110' , nextLevel : [ { name : '朝阳' , code : '011001' } , { name : '海淀' , code : '011002' } ] } ,
]
} ,
/**
* Picker用户点击确认时触发
*
* @param {Object} e pickerChange的事件对象
* @param {Object} e.detail.selectedIndex 用户选择的数据在数组中所在的下标
* @param {Object} e.detail.selectedArray 用户选择的数据
*/
pickerChange ( e ) {
const { picker } = e . currentTarget . dataset
const { selectedIndex , selectedArray } = e . detail
const list = {
picker_1 : 'result_1' ,
picker_2 : 'result_2' ,
}
console . log ( '多级联动结果:' , selectedIndex , selectedArray )
const change = { }
change [ list [ picker ] ] = selectedArray
this . setData ( change )
} ,
/**
* Picker用户点击取消时触发
*
* @param {Object} e pickerCancel的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcancel触发时的事件对象e
*/
pickerCancel ( e ) {
console . log ( e )
} ,
/**
* Picker用户滑动某一列的值改变时触发
*
* @param {Object} e pickerColumnchange的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcolumnchange触发时的事件对象e
*/
pickerColumnchange ( e ) {
console . log ( e )
} ,
} ) Einfaches Festlegen von Stilen in .wxss .
. picker {
display : flex;
flex-direction : row;
align-items : center;
margin : 10 rpx 0 ;
padding : 10 rpx 0 ;
background-color : # DEECE2 ;
font-size : 28 rpx ;
}
. picker view {
padding : 2 rpx 10 rpx ;
margin-left : 10 rpx ;
margin-right : 10 rpx ;
border-bottom : 2 rpx solid aqua;
}
