Maison Applet WeChat Développement de mini-programmes Les données du sélecteur du mini programme sont Object Array

Les données du sélecteur du mini programme sont Object Array

Jun 16, 2020 am 10:34 AM
微信小程序

Lorsque nous utilisons le composant sélecteur, nous pouvons avoir des doutes sur la raison pour laquelle il y a des problèmes de rendu, ou je veux simplement obtenir la valeur chinoise, que dois-je faire ?

Couche de vue

<view>数据是json的,直接展示</view>
picker使用说明:

<picker 
    mode="selector" 
    range-key="valuess" 
    range=&#39;{{school}}&#39; 
    model:value="{{currentSchool}}" 
    bindchange="handleChange"
>
  当前选择 {{school[currentSchool].valuess}}
  
</picker>
Copier après la connexion

Couche logique

page({
    data: {
        school: [
            {"isNewRecord":false,"id":"2","keyss":"school","valuess":"湖南小学"},
            {"isNewRecord":false,"id":"3","keyss":"school","valuess":"北京小学"}
        ],
        currentSchool: ""
    }
    handleChange(e) {
        console.log(e)
        // 如果 range是一个 Object Array形式的,那这里的value就是索引下标
        let currentVal = e.detail.value
    
        // 对应的中文是
        let text = this.data.school[currentVal].valuess
        console.log(&#39;中文-->&#39;, text)
    },
})
Copier après la connexion

Ici, ce que nous transmettons est un objet tableau Object Type de tableau, donc lorsque nous utilisons le composant sélecteur, nous devons distinguer , la signification de ces champs, et comment obtenir la valeur

range-key nous indique quel champ est utilisé pour obtenir la valeur lors du rendu. Ce qui suit est le cas où il n'est pas spécifié s'il s'agit d'un très. structure de données simple

Semblable à : école : ["Chinois", "Math", "Musique"]

n'a pas besoin d'être spécifié pour les structures de données complexes, spécifiez les champs et WeChat nous attribuera automatiquement des valeurs

<. 🎜>

Auteur : ZhiqingyuLes données du sélecteur du mini programme sont Object Array

model:value="{{currentSchool}}" Vous trouverez peut-être ceci, pourquoi le modèle est-il lié devant la valeur

parce que WeChat est pas de liaison de données bidirectionnelle, si vous écrivez simplement value="{{Currently selected index subscript-currentSchool}}"

currentSchool dans la couche logique ne changera pas, les données doivent être modifiées via l'événement bindchange. data in, comme ce qui suit

handleChange(e) {
    this.setData({
       currentSchool: e.detail.value
    })
}
Copier après la connexion
L'avantage d'utiliser model est que nous n'avons pas besoin de faire l'opération d'affectation Tant que nous cliquons sur OK dans le coin supérieur droit, l'école actuelle dans les données sera. mis à jour. Cliquer sur Annuler ne mettra pas à jour.

Les données du sélecteur du mini programme sont Object Array

des données dans data La valeur que nous obtenons de e.detail.value dans handleChange est également un indice. voulez du texte texte

Utilisez simplement l'index pour récupérer les attributs d'objet {} dans les données source comme ci-dessus

Il existe également une opération courante, qui consiste à changer school--schoolFilter en [" Hunan Primary School", " Beijing Primary School"] Cette structure simple, puis e.detail.value obtient le chinois

Mais pour cette exigence, il y a deux tableaux dans les données : schoolFilter--Array type et school --Object Type de tableau, utilisez range = "{{schoolFilter}}" dans le sélecteur

Ensuite, pour obtenir d'autres attributs des données source, vous devez parcourir l'école puis obtenir la valeur

Résumé

  • Si vous ne souhaitez pas écrire bindchange pour modifier les données, utilisez model:

  • picker. Les packages dans la balise de début et de fin sélectionnent uniquement le contenu futur. Vous pouvez N'hésitez pas à organiser et à utiliser le rendu de texte ou le rendu {{content}} ou le rendu d'affichage ou le rendu d'entrée. Vous pouvez

  • .
  • pour obtenir d'autres champs dans le tableau d'objets. Si vous ne souhaitez pas filtrer les données, utilisez le tableau d'objets. Cette structure est accessible via l'index hors travail. Il n'est pas nécessaire de créer 2 champs dans les données <.>

  • Seulement en cliquant sur le bouton [OK] affiché dans le sélecteur, les données du sélecteur seront mises à jour
  • Tutoriel recommandé : "<.>Mini-programme WeChat
"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le mini-programme Xianyu WeChat est officiellement lancé Le mini-programme Xianyu WeChat est officiellement lancé Feb 10, 2024 pm 10:39 PM

Le mini-programme Xianyu WeChat est officiellement lancé

Quel est le nom de l'applet Xianyu WeChat ? Quel est le nom de l'applet Xianyu WeChat ? Feb 27, 2024 pm 01:11 PM

Quel est le nom de l'applet Xianyu WeChat ?

L'applet WeChat implémente la fonction de téléchargement d'images L'applet WeChat implémente la fonction de téléchargement d'images Nov 21, 2023 am 09:08 AM

L'applet WeChat implémente la fonction de téléchargement d'images

Comment utiliser PHP pour développer la fonction de transaction d'occasion de l'applet WeChat ? Comment utiliser PHP pour développer la fonction de transaction d'occasion de l'applet WeChat ? Oct 27, 2023 pm 05:15 PM

Comment utiliser PHP pour développer la fonction de transaction d'occasion de l'applet WeChat ?

Implémentez l'effet de menu déroulant dans l'applet WeChat Implémentez l'effet de menu déroulant dans l'applet WeChat Nov 21, 2023 pm 03:03 PM

Implémentez l'effet de menu déroulant dans l'applet WeChat

Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel Nov 21, 2023 pm 05:59 PM

Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel

Implémenter des effets de filtre d'image dans les mini-programmes WeChat Implémenter des effets de filtre d'image dans les mini-programmes WeChat Nov 21, 2023 pm 06:22 PM

Implémenter des effets de filtre d'image dans les mini-programmes WeChat

Implémenter l'effet de rotation d'image dans l'applet WeChat Implémenter l'effet de rotation d'image dans l'applet WeChat Nov 21, 2023 am 08:26 AM

Implémenter l'effet de rotation d'image dans l'applet WeChat

See all articles