微信小程序项目：tab导航栏

这里写两种的代码， 一开始是使用的第二种（使用变量控制wx：if） 后来发现了个更便利的方法一（“tabBar”）

参看： 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

方法一：

效果

加在app.json内，pagePath自定义到切换的页

  "tabBar": {
    
    "color": "#fff",
    "selectedColor": "#fff",
    "backgroundColor": "#31c27c",
    "position": "top",
    "list": [
      {
    
        "pagePath": "pages/index/index",
        "text": "推荐"
      },
      {
    
        "pagePath": "pages/index/index2",
        "text": "排行榜"
      },
      {
    
        "pagePath": "pages/index/index3",
        "text": "搜索"
      }
    ]
  },

方法二：

效果：

代码：

.js

  data: {
    
    navbar:['推荐','发现'],
        currentTab:2,
  },
  //响应点击导航栏
  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-->

<!--导航菜单-->
<view class="navbar" style="z-index:50">
<!--循环-->
 <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>
  <!--推荐 话说id是啥-->
<view hidden="{
    {currentTab !== 0}}" id="two">
  <template is="list" data="{
    {maintainRecordlist}}" />
  <view>
  推荐
  </view>
</view>
<!--发现-->
<view hidden="{
    {currentTab !== 1}}" id="one">
  <template is="list" data="{
    {maintainRecordlist}}" />
  <view class="products">
  发现
  热门栏目
  </view>
  <view class="classify"> 
  分类
  </view>
</view>

.wcss

/* pages/subject/subject.wxss */
/*圆点数字标注*/
.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; }

/*顶部导航样式*/
.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;

}