国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Maison Applet WeChat Développement de mini-programmes Exemple de développement de menu déroulant de simulation d'applet WeChat

Exemple de développement de menu déroulant de simulation d'applet WeChat

Mar 17, 2018 pm 12:16 PM
Menu de tirage Mini-programme Exemple de développement

Cet 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

Liste 1

  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}}

eat

    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 ? &#39;rotateRight&#39; :&#39;&#39;}}"></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?&#39;display_show&#39;:&#39;display_none&#39;}}">列表1</view>
        </navigator>
        <navigator url="pages/scroll-view/index">
        	<view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表2</view>
        </navigator>
        <navigator url="pages/scroll-view/index">
        	<view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表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 ? &#39;rotateRight&#39; :&#39;&#39;}}"></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:&#39;興趣&#39;,
    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!

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

Outils d'IA chauds

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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?!

Outils chauds

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)

Sujets chauds

Tutoriel PHP
1502
276
Comment créer un menu déroulant dans le tableau WPS Comment créer un menu déroulant dans le tableau WPS Mar 21, 2024 pm 01:31 PM

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

Comment imprimer un document Word sans commentaires Comment imprimer un document Word sans commentaires Apr 18, 2023 pm 02:19 PM

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

Comment ajouter des bordures de page artistiques dans Microsoft Word Comment ajouter des bordures de page artistiques dans Microsoft Word Apr 27, 2023 pm 08:25 PM

ê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

Développer l'applet WeChat en utilisant Python Développer l'applet WeChat en utilisant Python Jun 17, 2023 pm 06:34 PM

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émenter des effets de retournement de cartes dans les mini-programmes WeChat Implémenter des effets de retournement de cartes dans les mini-programmes WeChat Nov 21, 2023 am 10:55 AM

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?: &lt;!--index.wxml-. -&gt;&l

5 fa?ons (et correctifs) de redimensionner votre écran pour surveiller sous Windows 11 5 fa?ons (et correctifs) de redimensionner votre écran pour surveiller sous Windows 11 Apr 14, 2023 pm 03:28 PM

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

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

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.

Alipay a lancé le mini-programme ??Chinese Character Picking-Rare Characters?? pour collecter et compléter la bibliothèque de personnages rares. Alipay a lancé le mini-programme ??Chinese Character Picking-Rare Characters?? pour collecter et compléter la bibliothèque de personnages rares. Oct 31, 2023 pm 09:25 PM

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

See all articles