Implémenter des effets de sélecteur de liens à plusieurs niveaux dans les mini-programmes WeChat

Pour implémenter l'effet de sélection de liens multi-niveaux dans les mini-programmes WeChat, des exemples de code spécifiques sont nécessaires

Avec la popularité et le développement des mini-programmes WeChat, de plus en plus de développeurs commencent à prêter attention aux compétences de développement et effets de mise en œuvre des mini-programmes. Parmi eux, le sélecteur de liaison multi-niveaux est un effet de sélection courant dans les petits programmes, qui peut offrir une bonne expérience utilisateur et des effets interactifs. Cet article présentera comment implémenter des sélecteurs de liaison à plusieurs niveaux dans les mini-programmes WeChat et donnera des exemples de code spécifiques.

Étape 1 : Créer une page et une mise en page

Tout d'abord, nous devons créer une nouvelle page pour implémenter le sélecteur de liens à plusieurs niveaux. Dans les outils de développement WeChat, sélectionnez « Nouveau fichier », sélectionnez « Page », puis remplissez le nom et le chemin de la page. Dans la page créée, nous devons définir la disposition et le style du sélecteur.

L'exemple de code est le suivant :

<view class="container">
   <picker mode="selector" range="{{pickerData.firstArray}}" bindchange="handleFirstChange">
     <view>{{pickerData.firstArray[pickerData.firstIndex]}}</view>
   </picker>
   <picker mode="selector" range="{{pickerData.secondArray}}" bindchange="handleSecondChange">
     <view>{{pickerData.secondArray[pickerData.secondIndex]}}</view>
   </picker>
   <picker mode="selector" range="{{pickerData.thirdArray}}" bindchange="handleThirdChange">
     <view>{{pickerData.thirdArray[pickerData.thirdIndex]}}</view>
   </picker>
</view>

Dans le code ci-dessus, nous utilisons trois composants de sélecteur comme base du sélecteur de liaison multi-niveaux. Chaque composant de sélecteur a un attribut de plage pour définir la source de données des éléments facultatifs, et transmettez l'événement bindchange pour lier la fonction de rappel du changement de sélection. Dans chaque composant de sélecteur, nous définissons également un composant de vue pour afficher l'élément actuellement sélectionné.

Étape 2 : Définir la source de données du sélecteur

Pour implémenter des sélecteurs de liaison multi-niveaux dans le mini-programme, nous devons définir la source de données du sélecteur. Ces sources de données peuvent être obtenues via des interfaces ou des données locales, et sont organisées dans un certain format. Dans cet exemple, nous supposons que le sélecteur a trois niveaux de sélection et que les sources de données de chaque niveau de sélecteur sont respectivement firstArray, secondArray et ThirdArray.

L'exemple de code est le suivant :

Page({
   data: {
      pickerData: {
         firstArray: ["选项一", "选项二", "选项三"],
         secondArray: ["选项A", "选项B", "选项C"],
         thirdArray: ["选项甲", "选项乙", "选项丙"]
      },
      firstIndex: 0,
      secondIndex: 0,
      thirdIndex: 0
   },
   handleFirstChange: function(e) {
      this.setData({
         firstIndex: e.detail.value
      })
   },
   handleSecondChange: function(e) {
      this.setData({
         secondIndex: e.detail.value
      })
   },
   handleThirdChange: function(e) {
      this.setData({
         thirdIndex: e.detail.value
      })
   }
})

Dans le code ci-dessus, nous définissons l'objet pickerData dans data, qui contient la source de données du sélecteur à trois niveaux. Dans le même temps, nous avons également défini trois variables pour enregistrer l'index actuellement sélectionné de chaque sélecteur. Dans la fonction de rappel, lorsque la sélection du sélecteur change, nous mettons à jour la variable d'index correspondante via la méthode setData.

Étape 3 : Traiter l'effet de liaison du sélecteur

La dernière étape consiste à traiter l'effet de liaison du sélecteur. Dans un sélecteur de liaison à plusieurs niveaux, lorsque la sélection de niveau précédent du sélecteur change, la source de données du sélecteur de niveau suivant doit être mise à jour en fonction de la valeur sélectionnée pour obtenir l'effet de liaison.

L'exemple de code est le suivant :

Page({
   data: {
      pickerData: {
         firstArray: ["选项一", "选项二", "选项三"],
         secondArray: [],
         thirdArray: []
      },
      firstIndex: 0,
      secondIndex: 0,
      thirdIndex: 0
   },
   handleFirstChange: function(e) {
      var firstIndex = e.detail.value;
      var firstArray = this.data.pickerData.firstArray;
      var secondArray = this.getSecondArray(firstIndex);
         
      this.setData({
         firstIndex: firstIndex,
         secondArray: secondArray,
         secondIndex: 0,
         thirdArray: [],
         thirdIndex: 0,
      })
   },
   handleSecondChange: function(e) {
      var secondIndex = e.detail.value;
      var firstIndex = this.data.firstIndex;
      var secondArray = this.data.pickerData.secondArray;
      var thirdArray = this.getThirdArray(firstIndex, secondIndex);
      
      this.setData({
         secondIndex: secondIndex,
         thirdArray: thirdArray,
         thirdIndex: 0
      })
   },
   handleThirdChange: function(e) {
      var thirdIndex = e.detail.value;
      this.setData({
         thirdIndex: thirdIndex
      })
   },
   getSecondArray: function(firstIndex) {
      // 根据firstIndex获取对应的secondArray
      // 示例代码省略
   },
   getThirdArray: function(firstIndex, secondIndex) {
      // 根据firstIndex和secondIndex获取对应的thirdArray
      // 示例代码省略
   }
})

Dans le code ci-dessus, nous définissons deux fonctions auxiliaires getSecondArray et getThirdArray pour calculer la source de données du sélecteur de niveau suivant en fonction de la valeur du sélecteur de niveau précédent. L'implémentation spécifique de ces deux fonctions est omise et les développeurs peuvent les définir en fonction des besoins réels.

Résumé

Grâce aux étapes ci-dessus, nous pouvons obtenir l'effet de sélecteur de liaison à plusieurs niveaux dans l'applet WeChat. Dans cet exemple, nous créons une nouvelle page et définissons trois composants de sélecteur comme base du sélecteur de liens multi-niveaux. Ensuite, nous avons terminé la mise en œuvre du sélecteur de liaison multi-niveaux en définissant la source de données du sélecteur et en traitant l'effet de liaison du sélecteur.

Bien sûr, l'exemple ci-dessus n'est qu'une méthode de mise en œuvre, et les développeurs peuvent l'ajuster et l'étendre en fonction des besoins réels. J'espère que cet article pourra aider les développeurs à implémenter des effets de sélecteur de liens à plusieurs niveaux dans les mini-programmes 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!