L'applet WeChat implémente l'effet des onglets de la barre de navigation

Cet article présente principalement l'applet WeChat pour réaliser en détail l'effet d'onglet de la barre de navigation. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article est partagé avec tout le monde sur WeChat. Le code spécifique de l'applet pour implémenter l'onglet supérieur de MUI est pour votre référence. Le contenu spécifique est le suivant

Téléchargement DEMO

Rendu

WXML

<import src="../../template/list.wxml"/>

<view class="tui-tabbar-content">
 <view class="tui-tabbar-group">
  <text data-id="0" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 0 ? &#39;tui-active&#39; : &#39;&#39;}}">已获得赏金</text>
  <text data-id="1" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 1 ? &#39;tui-active&#39; : &#39;&#39;}}">赏金在路上</text>
  <text data-id="2" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 2 ? &#39;tui-active&#39; : &#39;&#39;}}">邀请失败</text>
 </view>
</view>
<view class="tui-list-box {{index == 0 ? &#39;&#39; : &#39;tui-hide&#39;}}">
 <template wx:for="{{[&#39;选项卡一子选项 - 1&#39;,&#39;选项卡一子选项 - 2&#39;,&#39;选项卡一子选项 - 3&#39;,&#39;选项卡一子选项 - 4&#39;,&#39;选项卡一子选项 - 5&#39;,&#39;选项卡一子选项 - 6&#39;,&#39;选项卡一子选项 - 7&#39;,&#39;选项卡一子选项 - 8&#39;]}}" is="listNoneOnly" data="{{item}}"></template>
</view>
<view class="tui-list-box {{index == 1 ? &#39;&#39; : &#39;tui-hide&#39;}}">
 <template wx:for="{{[&#39;选项卡二子选项 - 1&#39;,&#39;选项卡二子选项 - 2&#39;,&#39;选项卡二子选项 - 3&#39;,&#39;选项卡二子选项 - 4&#39;,&#39;选项卡二子选项 - 5&#39;]}}" is="listNoneOnly" data="{{item}}"></template>
</view>
<view class="tui-list-box {{index == 2 ? &#39;&#39; : &#39;tui-hide&#39;}}">
 <template wx:for="{{[&#39;选项卡三子选项 - 1&#39;,&#39;选项卡三子选项 - 2&#39;,&#39;选项卡三子选项 - 3&#39;]}}" is="listNoneOnly" data="{{item}}"></template>
</view>

WXSS

page{background-color: #efeff4;}
.tui-tabbar-content{
 padding: 10px;
}
.tui-tabbar-group{
 border: 1px solid #4cd964;
 border-radius: 3px;
 overflow: hidden;
 width: 100%;
 display: table;
 table-layout: fixed;
 color: #4cd964;
}
.tui-tabbar-cell{
 display: table-cell;
 width: 100%;
 height: 80rpx;
 line-height: 80rpx;
 font-size: 35rpx;
 text-align: center;
}
.tui-tabbar-cell:not(:last-child){border-right: 1px solid #4cd964;}
.tui-tabbar-cell.tui-active{background-color: #4cd964;color: #fff;}

.tui-list-box{border-top:1px solid #c8c7cc;}

JS

Page({
 data: {
  index: 0
 },
 changeTabbar(e){
  this.setData({ index: e.currentTarget.dataset.id})
 }
})

Résumé

La commutation des mini-programmes WeChat utilise le jugement d'une certaine valeur pour comparer des listes et barres d'onglets Faites le changement !

Ce qui précède représente 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 :

À propos de l'implémentation de la barre de navigation supérieure dans l'applet WeChat

Le composant de chargement du L'applet WeChat affiche le chargement Introduction à l'utilisation de l'animation d'entrée

Mise en œuvre des boutons de saisie et de réglage dynamique dans l'applet 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!