


Exemple de développement de menu déroulant de simulation d'applet WeChat
Mar 17, 2018 pm 12:16 PMCet article partage principalement avec vous les exemples de développement du menu déroulant de simulation d'applet WeChat, en espérant aider tout le monde.
1. Points de connaissances
1.Réaliser l'affichage et le masquage dynamique d'un certain contr?le
data:{ open:false }, showitem:function(){ this.setData({ open:!this.data.open }) },
.display_show{ display: block; } .display_none{ display: none; }
2 . Transmettez les paramètres via data-*
et e.target.dateset
< afficher class="phone_personal">{{firstPerson}}
this.setData({ firstPerson:e.target.dataset.me, })
à cette heure?: firstPerson=eat
3 .Mots de bo?te flexible?: display:flex;
<view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> </view>
dans le parent?:
display:flex;
justifier-content:space- between;
De cette fa?on les sous-ensembles seront juxtaposés. justify-content:space-between; De cette fa?on, les sous-ensembles seront aux deux extrémités
2. Liste des événements
(1). Liste déroulante
1.wxml
<view class="page"> <view class="page_bd"> <view class="body_head" bindtap="showitem">點(diǎn)擊我顯示下拉列表</view> <navigator url="pages/list/list"> <view class="{{open?'display_show':'display_none'}}">列表1</view> </navigator> <navigator url="pages/scroll-view/index"> <view class="{{open?'display_show':'display_none'}}">列表2</view> </navigator> <navigator url="pages/scroll-view/index"> <view class="{{open?'display_show':'display_none'}}">列表3</view> </navigator> </view> </view>
2.wxss
.page_bd{ padding: 10px; background-color: snow; } .body_head{ border: 1px solid; border-color: beige; padding: 10px; } .display_show{ display: block; border: 1px solid; border-color: beige; padding: 10px; } .display_none{ display: none; }
3.js
Page({ data:{ open:false }, showitem:function(){ this.setData({ open:!this.data.open }) }, onLoad:function(options){ // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) }, onReady:function(){ // 頁(yè)面渲染完成 }, onShow:function(){ // 頁(yè)面顯示 }, onHide:function(){ // 頁(yè)面隱藏 }, onUnload:function(){ // 頁(yè)面關(guān)閉 } })
(2 ). Menu déroulant
1.wxml
<view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> </view>吃 喝 玩
2.wxss
phone_personal{ width: 100%; color:rgb(34, 154, 181); height:100rpx; line-height:100rpx; text-align: center; } .phone_one{ display:flex; position:relative; justify-content:space-between; background-color:rgb(239, 239, 239); width:90%; height:100rpx; margin:22px auto; border-radius:10rpx; border-bottom:2rpx solid rgb(255, 255, 255); line-height:51px; padding-left:10px; } .person_box{ position: relative; } .phone_select{ margin-top:0; z-index: 100; position: absolute; } .select_one{ text-align: center; background-color:rgb(239, 239, 239); width:676rpx; height:100rpx; line-height:100rpx; margin:0 5%; border-bottom:2rpx solid rgb(255, 255, 255); } .personal_image{ z-index: 100; position: absolute; right:2.5%; width: 34rpx; height: 20rpx; margin:40rpx 20rpx 40rpx 0; transition: All 0.4s ease; -webkit-transition: All 0.4s ease; } .rotateRight{ transform: rotate(180deg); }
3 .js
Page({ data:{ selectPerson:true, firstPerson:'興趣', selectArea:false, }, //點(diǎn)擊選擇類型 clickPerson:function(){ var selectPerson = this.data.selectPerson; if(selectPerson == true){ this.setData({ selectArea:true, selectPerson:false, }) }else{ this.setData({ selectArea:false, selectPerson:true, }) } } , //點(diǎn)擊切換 mySelect:function(e){ this.setData({ firstPerson:e.target.dataset.me, selectPerson:true, selectArea:false, }) }, onLoad:function(options){ // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) }, onReady:function(){ // 頁(yè)面渲染完成 }, onShow:function(){ // 頁(yè)面顯示 }, onHide:function(){ // 頁(yè)面隱藏 }, onUnload:function(){ // 頁(yè)面關(guān)閉 } })
Recommandations associées?:
Menu déroulant de simulation JavaScript effets code_form
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)

Comment créer le menu déroulant du tableau WPS?: Après avoir sélectionné la cellule dans laquelle vous souhaitez définir le menu déroulant, cliquez successivement sur "Données", "Validité", puis effectuez les réglages correspondants dans la bo?te de dialogue contextuelle. pour dérouler notre menu. En tant que logiciel bureautique puissant, WPS a la capacité d'éditer des documents, des tableaux de données statistiques, etc., ce qui offre beaucoup de commodité à de nombreuses personnes qui ont besoin de traiter du texte, des données, etc. Afin d'utiliser habilement le logiciel WPS pour nous offrir beaucoup de commodité, nous devons être capables de ma?triser diverses opérations très basiques du logiciel WPS. Dans cet article, l'éditeur partagera avec vous comment utiliser le logiciel WPS. opérations du menu déroulant dans le tableau WPS qui appara?t. Après avoir ouvert le formulaire WPS, sélectionnez d'abord le

Avec Microsoft Word, les commentaires sont importants, surtout lorsque le document est partagé entre plusieurs personnes. Chacun peut ajouter quelque chose au contenu du document à travers ses commentaires, et il est très important de conserver ces commentaires pour référence future. Mais quand on a besoin d’imprimer un document, a-t-on vraiment besoin d’imprimer des commentaires ? Dans certains cas, oui. Mais dans d’autres cas, c’est un grand non ! Dans cet article, nous expliquons à travers 2 solutions différentes comment imprimer facilement un document Word sans imprimer les commentaires dessus. N'oubliez pas que les commentaires sont uniquement masqués et ne seront pas supprimés. Par conséquent, vous ne risquez absolument aucune partie de votre document ici en l’imprimant sans commentaire. J'espère que ?a vous plaira ! Solution 1?: Réussir

êtes-vous fatigué de voir tout le temps les bordures noires traditionnelles sur vos documents Word ? Cherchez-vous des moyens d'ajouter des bordures colorées et artistiques à vos documents pour les rendre plus attrayants et amusants ? Que diriez-vous d’ajouter différentes bordures artistiques à différentes pages de votre document Word ? Ou appliquer une seule bordure artistique à toutes les pages du document à la fois?? Je sais que vous êtes aussi enthousiasmé que nous par toute cette histoire de frontières artistiques?! Accédez directement à cet article pour apprendre à appliquer avec succès des bordures artistiques aux documents Word. Partie 1 : Comment appliquer la même bordure de page artistique à toutes les pages d'un document Word étape 1 : Ouvrez le document Word et cliquez sur l'onglet ? Conception ? dans le ruban supérieur. Choisissez dans DESIGN

Avec la popularité de la technologie Internet mobile et des smartphones, WeChat est devenu une application indispensable dans la vie des gens. Les mini-programmes WeChat permettent aux gens d'utiliser directement des mini-programmes pour résoudre certains besoins simples sans télécharger ni installer d'applications. Cet article explique comment utiliser Python pour développer l'applet WeChat. 1. Préparation Avant d'utiliser Python pour développer l'applet WeChat, vous devez installer la bibliothèque Python appropriée. Il est recommandé d'utiliser ici les deux bibliothèques wxpy et itchat. wxpy est une machine WeChat

Implémentation d'effets de retournement de cartes dans les mini-programmes WeChat Dans les mini-programmes WeChat, la mise en ?uvre d'effets de retournement de cartes est un effet d'animation courant qui peut améliorer l'expérience utilisateur et l'attractivité des interactions d'interface. Ce qui suit présentera en détail comment implémenter l'effet de retournement de carte dans l'applet WeChat et fournira des exemples de code pertinents. Tout d'abord, vous devez définir deux éléments de carte dans le fichier de mise en page du mini-programme, un pour afficher le contenu avant et un pour afficher le contenu arrière. L'exemple de code spécifique est le suivant?: <!--index.wxml-. ->&l

En raison des récentes améliorations apportées à travers le monde, les pièces détachées pour PC sont désormais disponibles au PDSF, ce qui a incité de nombreux utilisateurs à enfin construire le PC de leurs rêves. Construire un PC peut présenter des défis, et l'une des taches consiste à adapter votre écran à celui de votre moniteur. Si vous ne parvenez pas à installer un écran sur votre moniteur sous Windows 11, voici tout ce que vous devez savoir. Commen?ons. Comment ajuster votre écran pour la surveillance sous Windows 11 de 5 manières Pour adapter votre écran à votre moniteur, vous pouvez ajuster la résolution, la mise à l'échelle ou les paramètres de sortie d'affichage en fonction de vos paramètres actuels. Nous vous recommandons d'essayer de redimensionner la résolution pour conserver la qualité visuelle et le dpi. Cependant, si cela ne fonctionne pas pour vous, vous pouvez essayer

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.

Selon les informations de ce site du 31 octobre, le 27 mai de cette année, Ant Group a annoncé le lancement du ? Projet de sélection de caractères chinois ? et a récemment inauguré de nouveaux progrès : Alipay a lancé le mini-programme ? Sélection de caractères chinois-Caractères rares ?. pour collecter des collections de la société Les personnages rares complètent la bibliothèque de personnages rares et offrent différentes expériences de saisie pour les personnages rares afin d'aider à améliorer la méthode de saisie des caractères rares dans Alipay. Actuellement, les utilisateurs peuvent accéder à l'applet ??Caractères peu communs?? en recherchant des mots-clés tels que ??capture de caractères chinois?? et ??caractères rares??. Dans le mini-programme, les utilisateurs peuvent soumettre des images de caractères rares qui n'ont pas été reconnus et saisis par le système. Après confirmation, les ingénieurs d'Alipay effectueront des entrées supplémentaires dans la bibliothèque de polices. Ce site Web a remarqué que les utilisateurs peuvent également découvrir la dernière méthode de saisie par fractionnement de mots dans le mini-programme. Cette méthode de saisie est con?ue pour les mots rares dont la prononciation n'est pas claire. Démantèlement utilisateur
