Wechat applet project: tab navigation bar

Here are two kinds of code , At the beginning, it is the second kind of （ Use variables to control wx：if） Later, I found a more convenient method （“tabBar”）

see ： https://www.cnblogs.com/min-min-min/p/7452880.html
https://www.cnblogs.com/qinlinkun/p/12881811.html
https://blog.csdn.net/runner_123/article/details/80434119

Method 1 ：

effect

Add to app.json Inside ,pagePath Customize the page to switch to

  "tabBar": {
    
    "color": "#fff",
    "selectedColor": "#fff",
    "backgroundColor": "#31c27c",
    "position": "top",
    "list": [
      {
    
        "pagePath": "pages/index/index",
        "text": " recommend "
      },
      {
    
        "pagePath": "pages/index/index2",
        "text": " Ranking List "
      },
      {
    
        "pagePath": "pages/index/index3",
        "text": " Search for "
      }
    ]
  },

Method 2 ：

effect ：

Code ：

.js

  data: {
    
    navbar:[' recommend ',' Find out '],
        currentTab:2,
  },
  // Respond by clicking on the navigation bar 
  navbarTap:function(e){
    
    var that=this;
    that.setData({
    
      currentTab:e.currentTarget.dataset.idx,
      TypeItem:that.data.navbar[that.data.currentTab]
    })
  },

.wxml

<!--pages/subject/subject.wxml-->

<!-- Navigation menu -->
<view class="navbar" style="z-index:50">
<!-- loop -->
 <view wx:for="{
    {navbar}}" data-idx="{
    {index}}" wx:key="unique" class="item {
    {currentTab==index ? 'active' : ''}}" bindtap="navbarTap">
    <view class="notice" wx:if="{
    {count[index]>0}}">{
    {
    count[index]}}</view>
    {
    {
    item}}
    <!--<text  bindtap="navbarTap">{
    {
    item}}</text>-->
  </view>
  </view>
  <!-- recommend   Words id What is it -->
<view hidden="{
    {currentTab !== 0}}" id="two">
  <template is="list" data="{
    {maintainRecordlist}}" />
  <view>
   recommend 
  </view>
</view>
<!-- Find out -->
<view hidden="{
    {currentTab !== 1}}" id="one">
  <template is="list" data="{
    {maintainRecordlist}}" />
  <view class="products">
   Find out 
   Hot column 
  </view>
  <view class="classify"> 
   classification 
  </view>
</view>

.wcss

/* pages/subject/subject.wxss */
/* Dot numeric callout */
.notice {
    
  width:28rpx;
  height:28rpx;
  color:#fff;
  text-align:center;
  background-color:#ec9e14;
  border-radius:50%;
  position:absolute;
  float:left;
 /* margin-top: 8rpx;*/
 top:5rpx;
  font-size: 15rpx;
  right:30rpx;
  line-height:30rpx; }

/* Top navigation style */
.navbar{
    
flex: none;
display: flex;
background: #ffffff;
margin-top: 20rpx;
z-index: 50;
}
.navbar .item{
    
position: relative;
flex: auto;
text-align: center;
line-height: 100rpx;
font-size: 35rpx;
color: #666666;
font-family: Microsoft YaHei;
}
.navbar .item.active{
    
color: #ec9e14;
font-size: 35rpx;
font-family: Microsoft YaHei;
border: none;
}
.navbar .item.active:after{
    
  border: none;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;

  font-size: 24rpx;
  color: #666666;
  font-family: Microsoft YaHei;
 }
 .products{
    
  position: fixed;
  top: 120rpx;
  bottom: 450rpx;
  left: 0;
  width: 100%;
  height: calc(100% - 500rpx);
  border: #666666;
  border-style: solid;
}
.classify{
    
  position: fixed;
  top:840rpx ;
  bottom: 0;
  left: 0;
  width: 100%;
  border: #ec9e14;
  border-style: solid;

}