Guide technique du widget de sélection dans les mini-programmes WeChat

Composant sélecteur s'ouvrant depuis le bas

Détails techniques :

  1. Ce composant propose cinq variantes : sélecteur simple, sélecteur multi-colonnes, sélecteur d'heure, sélecteur de date et sélecteur de province-ville-district.
  2. Le composant doit impérativemant envelopper du contenu, sinon les options ne peuvent pas être affichées.
<wxs module="donnees">
  module.exports.listeElements = ['Paris', 'Berlin', 'Londres', 'Washington'];
</wxs>

<!-- Ce sélecteur ne s'ouvrira pas car il n'a pas de contenu à l'intérieur -->
<picker mode="selector" value="0" style="background:#ccc;width:300px;height:100px;" range="{{donnees.listeElements}}">
</picker>

<!-- Ce sélecteur s'ouvrira lors du clic sur le texte qu'il contient -->
<picker mode="selector" value="0" style="background:#f00;width:300px;height:100px;" range="{{donnees.listeElements}}"> <view>Cliquez ici pour ouvrir</view> </picker>
  • Sélecteur simple : [Number] – l'indice de l'option sélectionnée, commençant à 0.
  • Sélecteur multi-colonnes : [Array] – un tableau contenant les indices de chaque colonne.
  • Sélecteur d'heure : [String] – au format hh:mm.
  • Sélecteur de date : [String] – au format YYYY-MM-DD.
  • Sélecteur province-ville-district : [Array] – au format [nom province, nom ville, nom district].

1. Sélecteur simple : mode="selector"

Prototype :

<picker
    mode="selector"
    value="[String]"
    range="[Array | Object Array]"
    range-key="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
>
</picker>

Atttributs :

Nom Obligatoire Type Valeur par défaut Description
mode oui [String] selector Valeur fixe indiquant un sélecteur simple.
range oui [Array | Object Array] [] Source de données pour les options. Si c'est un Array, chaque élément est une option. Si c'est un Object Array, range-key doit être défini pour spécifier la clé à afficher.
range-key non [String] Lorsque range est un Object Array, indique la clé de l'objet à utiliser comme libellé.
value non [String] Valeur par défaut du sélecteur. Représente l'indice de l'option (à partir de 0). Modifiable via JavaScript.
disabled non [Boolean] false Si true, le composant est désactivé.
bindchange non [EventHandle] Événement déclenché lors de la confirmation d'une option. event.detail = {value: value}.
bindcancel non [EventHandle] Événement déclenché lors de l'annulation.

2. Sélecteur multi-colonnes : mode="multiSelector"

Prototype :

<picker
    mode="multiSelector"
    value="[Array]"
    range="[Array 2D / Object Array 2D]"
    range-key="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
    bindcolumnchange="[EventHandle]"
>
</picker>

Attributs :

Nom Obligatoire Type Valeur par défaut Description
mode oui [String] multiSelector Valeur fixe pour le sélecteur multi-colonnes.
range oui [Array | Object Array] [] Source de données sous forme de tableau 2D, où chaque sous-tableau représente une colonne. Exemple : [["a","b"], ["c","d"]].
range-key non [String] Pour les Object Arrays 2D, spécifie la clé à afficher.
value non [Array] [] Tableau contenant les indices sélectionnés pour chaque colonne (à partir de 0).
disabled non [Boolean] false Si true, le composant est désactivé.
bindchange non [EventHandle] Événement déclenché à la confirmation. event.detail = {value: value}.
bindcolumnchange non [EventHandle] Événement déclenché lors du changement d'une colonne. event.detail = {column: column, value: value}.
bindcancel non [EventHandle] Événement déclenché lors de l'annulation.

3. Sélecteur d'heure : mode="time"

Prototype :

<picker
    mode="time"
    value="[String]"
    start="[String]"
    end="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
>
</picker>

Attributs :

Nom Obligatoire Type Valeur par défaut Description
mode oui [String] time Valeur fixe pour le sélecteur d'heure.
start non [String] Heure de début de la plage valide, au format "hh:mm".
end non [String] Heure de fin de la plage valide, au format "hh:mm".
value non [String] Heure sélectionnée, au format "hh:mm".
disabled non [Boolean] false Si true, le composant est désactivé.
bindchange non [EventHandle] Événement déclenché à la confirmation. event.detail = {value: value}.
bindcancel non [EventHandle] Événement déclenché lors de l'annulation.

4. Sélecteur de date : mode="date"

Prototype :

<picker
    mode="date"
    start="[String]"
    end="[String]"
    fields="[day | month | year]"
    value="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
>
</picker>

Attributs :

Nom Obligatoire Type Valeur par défaut Description
mode oui [String] date Valeur fixe pour le sélecteur de date.
start non [String] Date de début de la plage valide, au format "YYYY-MM-DD".
end non [String] Date de fin de la plage valide, au format "YYYY-MM-DD".
fields non [day | month | year] day Granularité de sélection : year (format YYYY), month (format YYYY-MM) ou day (format YYYY-MM-DD).
value non [String] Date sélectionnée, au format "YYYY-MM-DD".
disabled non [Boolean] false Si true, le composant est désactivé.
bindchange non [EventHandle] Événement déclenché à la confirmation. event.detail = {value: value}.
bindcancel non [EventHandle] Événement déclenché lors de l'annulation.

5. Sélecteur province-ville-district : mode="region"

Prototype :

<picker
    mode="region"
    value="[Array]"
    custom-item="[String]"
    disabled="[Boolean]"
    bindchange="[EventHandle]"
    bindcancel="[EventHandle]"
>
</picker>

Attributs :

Nom Obligatoire Type Valeur par défaut Description
mode oui [String] region Valeur fixe pour le sélecteur de régions.
value non [Array] [] Tableau de sélection : [province, ville, district].
custom-item non [String] Ajoute un élément personnalisé en haut de chaque colonne (ex : "Tous").
disabled non [Boolean] false Si true, le composant est désactivé.
bindchange non [EventHandle] Événement déclenché à la confirmation. event.detail = {value: value}.
bindcancel non [EventHandle] Événement déclenché lors de l'annulation.

Remarques :

  1. Ce sélecteur affiche trois colonnes : province, ville et district.
  2. Les données des provinces, villes et districts sont générées automatiquement par le composant, sans nécessité de source externe.

Étiquettes: wechat-miniprogram picker-component wxs selector-widget date-picker

Publié le 11 juin à 00h00

Étiquettes Populaires

©2026 L'Atelier Monstre