微信小程序自定义tabbar。完成图如下： 我是引用了colorui的组件库里面的操作条。 下面是colorui的官网 https://github.com/weilanwl/ColorUI/ 首先在app.json里设置

"custom": true,

可直接复制

"tabBar": { "custom": true, "backgroundColor": "#ffffff", "color": "#999999", "selectedColor": "#545454", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/discover/discover/index", "text": "发现" }, { "pagePath": "pages/organize/organize/index", "text": "组队" }, { "pagePath": "pages/community/community/index", "text": "社区" }, { "pagePath": "pages/mine/mine/mine", "text": "我的" } ] },

接着创建这个文件夹，怕你们懒的敲，文件名字都给你了

custom-tab-bar

下面是colorui的操作条使用链接 https://www.kancloud.cn/m22543/colorui/1289238

下面都是在custom-tab-bar文件下写的

wxml

<view class="box"> <view class="cu-bar tabbar"> <view class="action {{selected === 0 ? 'active' : 'default'}}" data-index="0" bindtap="switchTab"> <view class="cuIcon-home"></view> 首页 </view> <view class="action {{selected === 1 ? 'active' : 'default'}}" data-index="1" bindtap="switchTab"> <view class="cuIcon-discover"></view> 发现 </view> <view class="action add-action {{selected === 2 ? 'active' : 'default'}}" data-index="2" bindtap="switchTab"> <button class="cu-btn cuIcon-friendadd bg-cyan"></button> 组队 </view> <view class="action {{selected === 3 ? 'active' : 'default'}}" data-index="3" bindtap="switchTab"> <view class="cuIcon-new"> </view> 社区 </view> <view class="action {{selected === 4 ? 'active' : 'default'}}" data-index="4" bindtap="switchTab"> <view class="cuIcon-my"> </view> 我的 </view> </view> </view>

js

这是实现跳转页面

Component({ properties: { }, data: { selected:0, tabList:[ { "pagePath": "pages/index/index", "text": "首页", }, { "pagePath": "pages/discover/discover/index", "text": "发现" }, { "pagePath": "pages/organize/organize/index", "text": "组队" }, { "pagePath": "pages/community/community/index", "text": "社区" }, { "pagePath": "pages/mine/mine/mine", "text": "我的" } ] }, methods: { switchTab(e){ console.log(this.data) let key = Number(e.currentTarget.dataset.index); let tabList = this.data.tabList; let selected = this.data.selected; if(selected !== key){ this.setData({ selected:key }); wx.switchTab({ url: `/${tabList[key].pagePath}`, }) } } } })

wxss

下面的bg-cyan我import进去不能用，icon就可以，我也没去深究。

@import "../components/colorui/main.wxss"; @import "../components/colorui/icon.wxss"; .tabbar{ background-color: #ffffff; } .bg-cyan{ background-color: #cce6ff; } .active{ color: #0081ff; } .default{ color:rgb(51, 24, 24); }

最后在每个跳转的页面设置

Page({ data: { }, onLoad: function (options) { }, onShow: function () { this.tabBar() ; }, tabBar(){ if(typeof this.getTabBar === 'function' && this.getTabBar()){ this.getTabBar().setData({ selected:0 }) } } })

每个页面都需要对应上

感谢这位大佬下面是他的哔哩哔哩视频链接，看不懂我的可以去看他的。 https://www.bilibili.com/video/BV12y4y1y794