WeChat Mini Program : Exemple de mise en œuvre de l'effet d'onglets-Développement de mini-programmes-php.cn

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

高洛峰

Libérer： 2018-05-29 15:01:21

original

5053 Les gens l'ont consulté

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 :

微信小程序：如何实现tabs选项卡效果示例

demo.wxml :

<blockquote><view class="tab">

Copier après la connexion

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( "------" );  
  }  
});

Copier après la connexion

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

Copier après la connexion

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

微信小程序：如何实现tabs选项卡效果示例

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 !