Applet WeChat
Développement de mini-programmes
Rendu conditionnel complet du mini programme en dix minutes
Rendu conditionnel complet du mini programme en dix minutes
Nov 16, 2022 pm 04:03 PM
Cet article vous apporte des connaissances pertinentes sur le WeChat Mini Program, qui présente principalement le contenu pertinent sur le rendu conditionnel. Le soi-disant rendu conditionnel consiste à déterminer s'il faut restituer le code sur la page d'affichage. , j'espère que cela aidera tout le monde.
1.wx:if implémente le rendu conditionnel
Dans le framework, utilisez wx:if="" pour déterminer si le bloc de code doit être rendu?: wx:if="" 來判斷是否需要渲染該代碼塊：
<view>True<view></view></view>
如果condition的值為true，就會在頁面上渲染出view組件，否則將不會顯示該組件。同時還可以結(jié)合wx:elif和wx:else來使用，此時可以進行多條件的判斷是否渲染該代碼。
<view>組件1</view><view>組件2</view><view>組件3</view>
下面做一個演示：在
js文件的data中定義一個type，同時在wxml文件中定義三個view組件，根據(jù)type的值來決定是否渲染view組件。
此時，改變type的值就可以改變頁面渲染的內(nèi)容。
2.block結(jié)合wx:if使用
因為 wx:if 是一個控制屬性，需要將它添加到一個標(biāo)簽上。如果要一次性判斷多個組件標(biāo)簽，可以使用一個 <block></block> 標(biāo)簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。
<block> ??<view>?view1?</view> ??<view>?view2?</view></block>
注意：不是一個組件，只是一個包裹性的容器，不會在頁面上做任何渲染。
下面做一個演示：在
<block></block>中包裹兩個view組件，使用wx:if來決定是否需要渲染這兩個組件。
此時在頁面上渲染了兩個view組件，block作為包裹性的容器并沒有被渲染。
3.hiden實現(xiàn)條件渲染
在框架中，使用 hidden="" 來控制組件的顯示與隱藏。與前面不同的是，hidden組件始終會被渲染，只是簡單的控制顯示與隱藏。
<view>當(dāng)條件為true時則會隱藏該元素</view>
下面做一個演示：在
js文件中定義一個flag，在wxml文件中使用hidden隱藏view組件。
可以在AppData中改變flag的值從而控制是否隱藏該view組件。
4. wx:if vs hidden
因為 wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當(dāng) wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。
同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。
相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:ifrrreee
condition est vraie, le composant de vue sera rendu sur la page, sinon le composant ne sera pas affiché. En même temps, il peut également être utilisé en combinaison avec wx:elif et wx:else. à ce stade, plusieurs conditions peuvent être utilisées pour déterminer s'il faut restituer le. code. rrreee
Faisons une démonstration?: définissons un type dans les données du fichier????2.block est utilisé conjointement avec wx:if ????Parce quejs, et définissons trois types dans lewxmlfile Le composant de vue détermine s'il faut restituer le composant de vue en fonction de la valeur de type.????à ce stade, modifiez la valeur du type Vous peut modifier le contenu du rendu de la page. ??
wx:if est un attribut de contr?le et doit être ajouté à un étiquette. Si vous souhaitez déterminer plusieurs balises de composants à la fois, vous pouvez utiliser une balise <block></block> pour envelopper plusieurs composants et utiliser l'attribut de contr?le wx:if ci-dessus. . ??rrreee??Remarque?: Ce n'est pas un composant, c'est juste un conteneur d'emballage et ne fera aucun rendu sur la page. ????Faisons une démonstration?: enveloppez deux composants????3.hiden implémente le rendu conditionnel????Dans le framework, utilisezviewdans<block></block>et utilisezwx:if code> pour décider si ces deux composants doivent être rendus. <br><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/26f15617cc5eaa265907c965be777bb7-3.png" class="lazy" alt="Insérer la description de l'image ici"><br> <br> à ce moment sur la page Deux composants <code>viewsont rendus etblock, en tant que conteneur d'encapsulation, n'est pas rendu. ??
hidden="" pour contr?ler l'affichage et le masquage des composants. Contrairement au précédent, le composant masqué sera toujours rendu et ce n'est qu'un simple contr?le à afficher et à masquer. ??rrreee??Faisons une démonstration?: définissez un flag dans le fichier??jset utilisezhiddenwxml/code>Masquer le composant de vue.
Peut être trouvé dansAppDatapour contr?ler s'il faut masquer le composant de vue. ??
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Le mini-programme Xianyu WeChat est officiellement lancé
Feb 10, 2024 pm 10:39 PM
Le mini programme WeChat officiel de Xianyu a été lancé discrètement. Dans le mini programme, vous pouvez publier des messages privés pour communiquer avec les acheteurs/vendeurs, afficher les informations personnelles et les commandes, rechercher des articles, etc. Si vous êtes curieux, qu'est-ce que le mini Xianyu WeChat. programme appelé ? Jetons un coup d'oeil. Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5 fonctions?; 3. Si vous souhaitez l'utiliser, vous devez activer le paiement WeChat avant d'acheter?;
Implémenter des effets de filtre d'image dans les mini-programmes WeChat
Nov 21, 2023 pm 06:22 PM
Implémentation d'effets de filtre d'image dans les mini-programmes WeChat Avec la popularité des applications de médias sociaux, les gens aiment de plus en plus appliquer des effets de filtre aux photos pour améliorer l'effet artistique et l'attractivité des photos. Les effets de filtre d'image peuvent également être implémentés dans les mini-programmes WeChat, offrant aux utilisateurs des fonctions de retouche photo plus intéressantes et créatives. Cet article expliquera comment implémenter des effets de filtre d'image dans les mini-programmes WeChat et fournira des exemples de code spécifiques. Tout d’abord, nous devons utiliser le composant canevas dans l’applet WeChat pour charger et modifier des images. Le composant canevas peut être utilisé sur la page
Implémentez l'effet de menu déroulant dans l'applet WeChat
Nov 21, 2023 pm 03:03 PM
Pour implémenter l'effet de menu déroulant dans les mini-programmes WeChat, des exemples de code spécifiques sont nécessaires. Avec la popularité de l'Internet mobile, les mini-programmes WeChat sont devenus une partie importante du développement d'Internet, et de plus en plus de gens ont commencé à y prêter attention et à y prêter attention. utilisez les mini-programmes WeChat. Le développement de mini-programmes WeChat est plus simple et plus rapide que le développement d'applications traditionnelles, mais il nécessite également la ma?trise de certaines compétences en développement. Dans le développement des mini-programmes WeChat, les menus déroulants sont un composant courant de l'interface utilisateur, permettant une meilleure expérience utilisateur. Cet article présentera en détail comment implémenter l'effet de menu déroulant dans l'applet WeChat et fournira des informations pratiques.
Quel est le nom de l'applet Xianyu WeChat??
Feb 27, 2024 pm 01:11 PM
Le mini-programme officiel WeChat de Xianyu a été lancé discrètement. Il offre aux utilisateurs une plate-forme pratique qui vous permet de publier et d'échanger facilement des objets inutilisés. Dans le mini programme, vous pouvez communiquer avec des acheteurs ou des vendeurs via des messages privés, afficher des informations personnelles et des commandes et rechercher les articles que vous souhaitez. Alors, comment s'appelle exactement Xianyu dans le mini-programme WeChat ? Ce guide didacticiel vous le présentera en détail. Les utilisateurs qui souhaitent savoir, veuillez suivre cet article et continuer à lire ! Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5?fonctions?;
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 Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable dans la vie des gens. Les mini-programmes WeChat fournissent non seulement une multitude de scénarios d'application, mais prennent également en charge les fonctions définies par les développeurs, notamment les fonctions de téléchargement d'images. Cet article présentera comment implémenter la fonction de téléchargement d'images dans l'applet WeChat et fournira des exemples de code spécifiques. 1. Travaux préparatoires Avant de commencer à écrire du code, nous devons télécharger et installer les outils de développement WeChat et nous inscrire en tant que développeur WeChat. En même temps, vous devez également comprendre WeChat
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 commutation de carrousel. L'applet WeChat est une application légère avec des caractéristiques de développement et d'utilisation simples et efficaces. Dans les mini-programmes WeChat, il est courant d'obtenir des effets de commutation de carrousel. Cet article explique comment utiliser l'applet WeChat pour obtenir l'effet de changement de carrousel et donne des exemples de code spécifiques. Tout d’abord, ajoutez un composant carrousel au fichier d’échange de l’applet WeChat. Par exemple, vous pouvez utiliser la balise <swiper> pour obtenir l'effet de commutation du carrousel. Dans ce composant, vous pouvez passer b
Implémenter l'effet de rotation d'image dans l'applet WeChat
Nov 21, 2023 am 08:26 AM
Pour implémenter l'effet de rotation d'image dans WeChat Mini Program, des exemples de code spécifiques sont nécessaires. WeChat Mini Program est une application légère qui offre aux utilisateurs des fonctions riches et une bonne expérience utilisateur. Dans les mini-programmes, les développeurs peuvent utiliser divers composants et API pour obtenir divers effets. Parmi eux, l'effet de rotation d'image est un effet d'animation courant qui peut ajouter de l'intérêt et des effets visuels au mini-programme. Pour obtenir des effets de rotation d'image dans les mini-programmes WeChat, vous devez utiliser l'API d'animation fournie par le mini-programme. Ce qui suit est un exemple de code spécifique qui montre comment
Implémentez la fonction de suppression coulissante dans le mini-programme WeChat
Nov 21, 2023 pm 06:22 PM
La mise en ?uvre de la fonction de suppression coulissante dans les mini-programmes WeChat nécessite des exemples de code spécifiques. Avec la popularité des mini-programmes WeChat, les développeurs rencontrent souvent des problèmes de mise en ?uvre de certaines fonctions courantes au cours du processus de développement. Parmi eux, la fonction de suppression coulissante est une exigence fonctionnelle courante et couramment utilisée. Cet article présentera en détail comment implémenter la fonction de suppression coulissante dans l'applet WeChat et donnera des exemples de code spécifiques. 1. Analyse des besoins Dans le mini programme WeChat, la mise en ?uvre de la fonction de suppression coulissante implique les points suivants : Affichage de la liste : pour afficher une liste qui peut être glissée et supprimée, chaque élément de la liste doit inclure
