小程序自定义tabbar

app.json

"navigationStyle": "custom", //改成custom

{
  "pages": [
    "pages/index/index",
  ],
  "window": {
    "navigationBarBackgroundColor": "#379afb",
    "navigationBarTitleText": "青丰加群",
    "navigationStyle": "custom",
    "navigationBarTextStyle": "white"
  },
  "usingComponents": {},
  "tabBar": {
    "custom": true,
    "color": "#aaa",
    "selectedColor": "#39b54a",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/information/information",
        "text": "找群"
      },
      {
        "pagePath": "pages/person/person",
        "text": "找人"
      },
      {
        "pagePath": "pages/release/release",
        "text": "发布"
      },
      {
        "pagePath": "pages/source/source",
        "text": "找资源"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "cloudfunctionRoot": "./cloudfunction/"

}

根目录下新建

文件夹:

custom-tab-bar

文件:

index.js

index.json

index.wxml

index.wxss

代码如下

index.js

Component({
  properties: {

  },
  data: {
    selected:0,
    tabList:[
      {
        "pagePath": "pages/information/information",
        "text": "找群",
      },
      {
        "pagePath": "pages/person/person",
        "text": "找人",
      },
      {
        "pagePath": "pages/release/release",
        "text": "发布",
      },
      {
        "pagePath": "pages/source/source",
        "text": "找资源",
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  },
 
  methods: {
    switchTab(e){
       
      console.log(this.data)
      let key = Number(e.currentTarget.dataset.index);
      let tabList = this.data.tabList;
      let selected = key;
        this.setData({
          selected:key
        })
    
        wx.switchTab({
          url: `/${tabList[key].pagePath}`,
        })
     
    }
  }
})

index.json

{
  "usingComponents": {}
}

index.wxml

<view class="box" >
  <view class="cu-bar tabbar">
    <view class="action {{selected === 0 ? 'text-green' : 'text-gray'}}" data-index="0" bindtap="switchTab">
      <view  class="{{selected === 0 ? 'icon-group_fill' : 'icon-group'}}"></view>找群

    </view>

    <view class="action {{selected === 1 ? 'text-green' : 'text-gray'}}" data-index="1" bindtap="switchTab">
      <view class="{{selected === 1 ? 'icon-friendaddfill' : 'icon-friendadd'}}"></view>找人
    </view>

    <view class="action {{selected === 2 ? 'text-green add-action' : 'text-gray add-action'}}"  data-index="2" bindtap="switchTab">
      <button class='cu-btn icon-add bg-gradual-blue shadow'></button>
      发布
    </view>

    <view class="action {{selected === 3 ? 'text-green' : 'text-gray'}}" data-index="3" bindtap="switchTab">
      <view class="{{selected === 3 ? 'icon-favorfill' : 'icon-favor'}}"></view>找资源
    </view>
  
    <view class="action {{selected === 4 ? 'text-green' : 'text-gray'}}" data-index="4" bindtap="switchTab">
      <view class="{{selected === 4 ? 'icon-myfill' : 'icon-my'}}">
        <!-- <view class='cu-tag badge'></view> -->
      </view>
      我的
    </view>

  </view>
</view>

index.wxss

@import "/colorui.wxss";

@import "/icon.wxss";

.tabbar{

  background-color: #ffffff;

}

.bg-cyan{

  background-color: #cce6ff;

}

.active{

  color: blue;

}

.default{

  color:rgb(51, 24, 24);

}

pages/index/index

 tabBar(){
    if(typeof this.getTabBar === 'function' && this.getTabBar()){
      this.getTabBar().setData({
        selected:1
      })
    }
  },