Comment implémenter l'onglet du mini-programme WeChat

Cet article présente principalement les informations pertinentes sur la méthode de mise en œuvre de l'onglet de l'applet WeChat. J'espère que tout le monde pourra réaliser une telle fonction grâce à cet article. Les amis dans le besoin pourront se référer au

WeChat. applet Comment implémenter les onglets

Avant-propos :

Les étudiants travaillant sur le front-end seront certainement familiers avec les onglets, qu'ils soient écrits nativement ou qu'ils soient inclus dans divers frameworks d'interface utilisateur. Je pense que tout le monde a utilisé de nombreux onglets et a une compréhension suffisamment claire des principes des onglets. Implémentons maintenant la fonction d'onglet dans l'applet WeChat.

L'applet WeChat n'est pas livrée avec un composant onglet, mais elle est livrée avec un composant swiper. Par conséquent, nous utilisons swiper pour implémenter la fonction onglet.

Regardez d'abord les rendus :

Code d'implémentation :

Code de la page :

<view class="swiper-tab">
  <view class="swiper-tab-item {{currentTab==0?&#39;active&#39;:&#39;&#39;}}" data-current="0" bindtap="clickTab">一</view>
  <view class="swiper-tab-item {{currentTab==1?&#39;active&#39;:&#39;&#39;}}" data-current="1" bindtap="clickTab">二</view>
  <view class="swiper-tab-item {{currentTab==2?&#39;active&#39;:&#39;&#39;}}" data-current="2" bindtap="clickTab">三</view>
</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
  <swiper-item><view>第一屏</view></swiper-item>
  <swiper-item><view>第二屏</view></swiper-item>
  <swiper-item><view>第三屏</view></swiper-item>
</swiper>

code js :

var app=getApp()
Page({
 data:{
  currentTab:0
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数

 },
 //滑动切换
 swiperTab:function( e ){
  var that=this;
  that.setData({
   currentTba:e.detail.current
  });
 },
 //点击切换
 clickTab: function( e ) { 

  var that = this; 

  if( this.data.currentTab === e.target.dataset.current ) { 
   return false; 
  } else { 
   that.setData( { 
    currentTab: e.target.dataset.current 
   }) 
  } 
 } 

})

code css :

.swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  font-weight: bold;
}
.swiper-tab-item{
  display: inline-block;
  width: 33.33%;
  color:red;
}
.active{
  color:aqua;
  border-bottom: 4rpx solid red;
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. !

Recommandations associées :

L'applet WeChat implémente la fonction de sélection d'une ville en fonction des lettres

À propos de la navigation inférieure colonne de développement de l'applet WeChat

Mise en œuvre de la classification des attributs de produit dans le projet de centre commercial de mini-programme 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!