微信小程序中使用colorui自定义tabbar按钮

废话不多说,直接上代码

app.json

{
  "pages": [

  ],
  "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

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.wxml

	
		
      找群

		

		
      找人
		

		
      
      发布
		

		
      找资源
		
	
		
      
        
      
      我的
		

	

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

任意一个页面的方法中加入:

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

即可实现以下效果:

青丰工具视频讲解