miniprogram picker
Release 1.0.7
bindcolumnchange pour modifier manuellement les valeurs de range et value afin de terminer le changement de liaison du Picker. est assez gênant et n'est pas propice à la duplication dans l'utilisation de différentes logiques métier.sourceData une structure de données fixe et effectuer certaines configurations nécessaires. Ce composant peut automatiquement aider les développeurs à gérer la logique de liaison.2.2.1 ou supérieure et开发者工具1.02.1808300 ou supérieur, le mini programme prend en charge l'utilisation de npm pour installer des packages tiers. 
| propriété | illustrer | taper | valeur par défaut | Est-ce obligatoire ? |
|---|---|---|---|---|
| donnéessource | Tableau source, sourceData a plusieurs dimensions et Picker peut avoir plusieurs niveaux. Le format doit être une collection de tableaux et d'objets, reportez-vous à l'exemple | Tableau | [] | vrai |
| mesures | Commande du préparateur | Nombre | 1 | FAUX |
| affichéNom du champ | Nom du champ pour afficher les données | Chaîne | 'nom' | FAUX |
| sous-ensembleFieldName | Le nom du champ du nœud enfant. La valeur de ce champ est le tableau de niveau suivant de Picker. | Chaîne | 'sous-ensemble' | FAUX |
| autreBesoinFieldsName | Les développeurs peuvent personnaliser d'autres champs qui doivent être renvoyés en fonction de leurs besoins. | Tableau | [] | FAUX |
| Indice par défaut | Le tableau d'indices des éléments sélectionnés par défaut, prioritaire sur defaultValue | Tableau | [] | FAUX |
| valeur par défaut | Tableau de valeurs de l'élément sélectionné par défaut Lorsque cet attribut est activé, defaultValueUniqueField est requis. | Tableau | [] | FAUX |
| defaultValueUniqueField | Le seul champ du tableau de valeurs de l'élément sélectionné par défaut, utilisé pour comparer avec le tableau source | Chaîne | '' | - |
| sélection automatique | Lors de l'initialisation, doit-il appeler automatiquement l'événement bindchange pour renvoyer les résultats au développeur ? | Booléen | FAUX | FAUX |
| initColumnSelectedIndex | Après la sélection de la nième colonne, si la valeur sélectionnée de la colonne supérieure à n est automatiquement initialisée à 0 | Booléen | FAUX | FAUX |
| désactivé | S'il faut désactiver | Booléen | FAUX | FAUX |
| méthode | illustrer | taper | objet d'événement |
|---|---|---|---|
| changement de liaison | Déclenché lorsque l'utilisateur clique sur confirmer | Poignée d'événement | event.detail = {selectedIndex, selectedArray} |
| lierannuler | Se déclenche lorsque l'utilisateur clique sur Annuler | Poignée d'événement | event.detail est l'objet événement lorsque bindcancel du composant natif est déclenché. |
| changement de colonne de liaison | Déclenché lorsque la valeur d'une colonne change lorsque l'utilisateur la fait glisser | Poignée d'événement | event.detail est l'objet événement lorsque le changement de colonne de liaison du composant natif est déclenché. |
sourceData est un tableau source, qui est une collection de structures d'objets de tableau à plusieurs dimensions et sourceData peut avoir plusieurs niveaux.steps , vous devez spécifier explicitement l'ordre du sélecteur. Par exemple, pour une liaison à trois niveaux, définissez steps: 3 .steps est défini sur 3 , sourceData doit respecter cet ordre.initColumnSelectedIndex activé, l'outil de débogage du développeur échouera. Cependant, aucun problème n'a été trouvé jusqu'à présent sur la machine réelle, c'est donc au développeur de décider de l'activer ou non.bindchange :selectedIndex : tableau d’index des sélections du sélecteur ;selectedArray : tableau de valeurs des éléments de sélection du sélecteur ;bindchange , bindcancel , bindcolumnchange , disabled . Vous pouvez vérifier le code source pour plus de détails. Installez le package miniprogram-picker .
Rappel : si vous ne souhaitez pas utiliser npm, vous pouvez également télécharger directement le dernier package de version et le mettre dans
componentsdu projet, tout comme si vous utilisiez des composants écrits par vous-même, mais npm est plus pratique.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save Cliquez sur la barre de menu dans les outils de développement WeChat : Outils --> Build npm. À ce stade, vous constaterez qu'il existe un répertoire miniprogram_npm supplémentaire dans le projet, qui contient le miniprogram-picker compilé.
Le composant tiers miniprogram-picker est introduit dans .json . La méthode d'utilisation est la même que celle de l'utilisation de vos propres composants encapsulés, sauf que vous n'avez pas besoin d'écrire le chemin spécifique, ce qui est très pratique.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} Utilisez miniprogram-picker dans .wxml . Je donne ici deux petits exemples, le premier est un lien à trois niveaux et le second est un lien à deux niveaux. Pour les attributs et méthodes d'événement spécifiques, veuillez vous référer à l'API.
miniprogram-pickern'a aucun style. Les développeurs peuvent personnaliser le style spécifique. Il serait préférable que vous soyez familier avec l'utilisation deslot. Pour plus de détails, veuillez vous référer au slot du composant mini-programme wxml.
< 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 > Définissez sourceData et écoutez les événements pickerChange dans .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 )
} ,
} ) Paramétrage simple des styles dans .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;
}
