WeChat Mini Program : Exemple de mise en œuvre de l'effet d'onglets

La petite fille vient également de commencer à utiliser l'applet WeChat. Elle a découvert que de nombreux composants à l'intérieur de WeChat ont été empaquetés, mais il n'y a aucun composant avec effet d'onglet, elle a juste besoin de l'utiliser récemment, alors elle a fait quelques recherches. Tout a été réglé pour que tout le monde puisse discuter et apprendre ensemble. S'il y a des problèmes ou des domaines qui peuvent être améliorés, tout le monde est invité à commenter et à se plaindre.

Tout d'abord, lorsque vous cliquez sur la navigation, vous avez besoin de deux variables. L'une consiste à stocker la classe de style de clic actuelle et l'autre est la classe de style par défaut pour les autres navigations.

La liste du contenu de l'onglet nécessite également deux variables. , l'une stocke le bloc d'affichage actuel et l'autre stocke d'autres blocs par défaut cachés

Utilisez l'opération trinoculaire pour obtenir l'index de navigation en cliquant et jugez s'il faut l'ajouter. la classe actuelle basée sur l'index [Remarque, ici je lie l'événement click à la barre de navigation parent, j'obtiens les propriétés de l'objet événement déclenchées par un clic via l'objet cible]

Veuillez combiner les rendus suivants :

demo.wxml :

<blockquote><view class="tab">

demo.js

Page( {  
  data: {  
    tabArr: {  
      curHdIndex: 0,  
      curBdIndex: 0  
    },  
  },  
  tabFun: function(e){  
    //获取触发事件组件的dataset属性  
    var _datasetId=e.target.dataset.id;  
    console.log("----"+_datasetId+"----");  
    var _obj={};  
    _obj.curHdIndex=_datasetId;  
    _obj.curBdIndex=_datasetId;  
    this.setData({  
      tabArr: _obj  
    });  
  },  
  onLoad: function( options ) {  
    alert( "------" );  
  }  
});

demo.wxss

.tab{  
    display: flex;  
    flex-direction: row;  
}  
.tab-left{  
    width: 200rpx;  
    line-height: 160%;  
    border-right: solid 1px gray;  
}  
.tab-left view{  
    border-bottom: solid 1px red;  
}  
.tab-left .active{  
    color: #f00;  
}  
.tab-right{  
    line-height: 160%;  
}  
.tab-right .right-item{  
    padding-left: 15rpx;  
    display: none;  
}  
.tab-right .right-item.active{  
    display: block;  
}

La finale l'effet de démonstration est le suivant :

Résumé : Le principe de Kagami_Tiger est de sélectionner un onglet, d'appeler le contenu de l'onglet sélectionné et masquer le contenu des autres onglets Bien sûr, si vous pouvez placer chaque catégorie d'onglets sur une page différente, alors chaque onglet peut être un pour chaque page différente, ce qui pourrait être mieux. Je ne l'ai pas développé de cette façon, et tout le monde est invité à le partager. Ce n'est qu'en apprenant les uns des autres que nous pourrons progresser ensemble.

Pour plus d'applets WeChat : exemples d'implémentation de l'effet d'onglets, veuillez faire attention au site Web PHP chinois pour les articles connexes !

Articles connexes :

Implémentation de l'effet d'onglets du programme WeChat Mini

Effet d'onglets CSS3 pur simple et élégant

javascript implémente l'effet de changement d'onglet