How to implement the tab effect of the WeChat applet navigation bar

This article mainly introduces the WeChat applet to realize the navigation bar tab effect in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Rendering

##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})
 }
})

Summary

The switching of WeChat applet uses the judgment of a certain value to switch between the list and the tab bar!

Related recommendations:

Detailed explanation of the scrolling tab effect of the ScrollTab component of the WeChat applet YDUI

Two jQuery implementation options Method of card function

jQuery mobile terminal Tab effect implementation method

The above is the detailed content of How to implement the tab effect of the WeChat applet navigation bar. For more information, please follow other related articles on the PHP Chinese website!