L'applet WeChat implémente la fonction d'expansion et de pliage des éléments de liste

L'applet WeChat implémente la fonction d'expansion et de réduction des éléments de liste, ce qui nécessite des exemples de code spécifiques

Introduction :
L'applet WeChat est une application multiplateforme développée rapidement qui fournit une API riche et des composants qui peuvent facilement développer et publier petits programmes pour répondre aux différents besoins des utilisateurs. Lors du développement de petits programmes, nous rencontrons souvent des scénarios dans lesquels des listes doivent être affichées, et parfois des listes trop longues entraîneront un affichage de page compliqué. Afin d'améliorer l'expérience utilisateur et l'esthétique de l'interface, nous pouvons envisager d'utiliser l'élément de liste. fonction d'expansion et de réduction. Cet article explique comment implémenter la fonction d'expansion et de réduction des éléments de liste dans l'applet WeChat et fournit des exemples de code spécifiques.

1. Idées d'implémentation :
Tout d'abord, nous devons définir une liste dans le fichier wxml et définir une variable pour contrôler l'état développé et réduit des éléments de la liste. Ensuite, en liant l'événement click, modifiez la valeur de la variable pour obtenir l'effet de développement et de pliage. Enfin, les informations détaillées sont affichées ou masquées en modifiant dynamiquement le style de la vue en fonction de l'état développé et réduit de l'élément de liste.

2. Exemple de code :

1. Définissez la liste dans le fichier wxml et définissez les variables pour contrôler l'état d'expansion et de repliement :

<view class="list">
  <view class="item" wx:for="{{list}}" wx:key="{{index}}">
    <view class="title" bind:tap="toggleItem">{{item.title}}</view>
    <view class="content" wx:if="{{item.isExpanded}}">
      <!-- 详细信息内容 -->
      <text class="info">{{item.info}}</text>
    </view>
  </view>
</view>

2. Implémentez la fonction de traitement d'événements dans le fichier js :

Page({
  data: {
    list: [
      {title: "列表项1", info: "列表项1的详细信息", isExpanded: false},
      {title: "列表项2", info: "列表项2的详细信息", isExpanded: false},
      {title: "列表项3", info: "列表项3的详细信息", isExpanded: false},
      ...
    ],
  },
  
  toggleItem: function(event) {
    var index = event.currentTarget.dataset.index;
    var list = this.data.list;
    list[index].isExpanded = !list[index].isExpanded;
    this.setData({
      list: list
    });
  }
})

3. Définissez le style dans le fichier wxss ：

.list {
  margin-top: 20rpx;
}

.item {
  padding: 10rpx;
  border-bottom: 1rpx solid #999;
}

.title {
  font-size: 28rpx;
  color: #333;
}

.content {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #666;
}

.info {
  margin-top: 10rpx;
}

3. Description du code :

1. Dans le fichier wxml, utilisez wx:for pour boucler la liste et lier l'événement de clic bind:tap="toggleItem", et appelez la fonction toggleItem pour obtenir l'effet d'expansion et de pliage. Utilisez le jugement conditionnel wx:if pour décider d'afficher ou non les informations détaillées en fonction de l'attribut isExpanded de l'élément de liste.
2. Dans le fichier js, une fonction de gestion d'événements nommée toggleItem est définie. Cette fonction obtient l'index de l'élément de liste actuellement cliqué via event.currentTarget.dataset.index, puis modifie la valeur de l'attribut isExpanded de l'élément de liste en fonction de l'index pour obtenir l'effet d'expansion et de réduction. Enfin, utilisez la méthode setData pour mettre à jour les données de la page.
3. Dans le fichier wxss, les styles des éléments de la liste sont définis, y compris les styles du titre, du contenu et des détails.

Résumé :
Grâce aux exemples de code ci-dessus, nous pouvons obtenir l'effet d'expansion et de repliement des fonctions dans les mini-programmes WeChat. Au cours du processus de développement, le style peut être ajusté en fonction des besoins réels et modifié de manière appropriée en fonction de la structure de données spécifique. J'espère que cet article pourra vous aider à implémenter la fonction d'expansion et de réduction des éléments de liste dans l'applet WeChat. Si vous avez des questions, veuillez laisser un message pour en discuter.

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!