微信小程序自定义tabBar样式，选中后中间凸起

效果预览

一、配置信息

在 app.json 中的 tabBar 中指定 custom 字段为 true【允许使用自定义 tabBar】 在所有 tab 页 json 中申明usingComponents 项，或者在 app.json 中全局开启 在 list 中指定自己需要 tab 示例 "tabBar": { "custom": true, "color": "#515151", "selectedColor": "#DAA520", "backgroundColor": "#000000", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/hospital/hospital", "text": "医院" }, { "pagePath": "pages/publish/publish", "text": "item3" }, { "pagePath": "pages/popularization/popularization", "text": "科普" }, { "pagePath": "pages/me/me", "text": "我的" } ] }, "usingComponents": { },

二、添加 tabBar 代码文件

在代码根目录下添加custom-tab-bar文件夹，并在该文件夹下新建 page，文件结构如下

|-- cusotm-tab-bar |-- index.js |-- index.json |-- index.wxml |-- index.wxss

三、编写 tabBar 代码

1. wxml 代码 <!--custom-tab-bar/index.wxml--> <view class="tab-bar"> <view wx:for="{ {list}}" wx:key="index" class="tab-bar-item { {item.bulge?bulge:}}" data-path="{ {item.pagePath}}" data-index="{ {index}}" bindtap="switchTab"> <view wx:if="item.bulge" class="tab-bar-bulge"></view> <image class="image" src="{ {selected === index ? item.selectedIconPath : item.iconPath}}"></image> <!-- <view wx:if="{ {item.text}}" style="color: { {selected === index ? selectedColor : color}}" class="tab-bar-view">{ {item.text}}</view> --> <view class="tab-bar-view" style="color: { { selected === index ? selectedColor : color}}">{ {item.text}}</view> </view> </view>
2. js 代码 // custom-tab-bar/index.js Component({ data: { color: "#515151", selectedColor: "#DAA520", backgroundColor: "#ffffff", list: [ { pagePath: "/pages/index/index", text: "首页", iconPath: "/images/tabbar/index.png", selectedIconPath: "/images/tabbar/index-selected.png" }, { pagePath: "/pages/hospital/hospital", text: "医院", iconPath: "/images/tabbar/hospital.png", selectedIconPath: "/images/tabbar/hospital-selected.png" }, { pagePath: "/pages/publish/publish", bulge:true, text: "发布", iconPath: "/images/tabbar/dog.png", selectedIconPath: "/images/tabbar/dog-selected.png" }, { pagePath: "/pages/popularization/popularization", text: "科普", iconPath: "/images/tabbar/popularization.png", selectedIconPath: "/images/tabbar/popularization-selected.png" }, { pagePath: "/pages/me/me", text: "我的", iconPath: "/images/tabbar/me.png", selectedIconPath: "/images/tabbar/me-selected.png" }, ] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({ url}) } } })
3. wxss 代码 .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: #FFF; display: flex; line-height: 1.2; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #e6e6e6; } .tab-bar-item { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tab-bar-item .image { width: 26px; height: 26px; } .bulge { background-color: #FFF; } .bulge .tab-bar-bulge{ position: absolute; z-index: -1; width: 64px; height: 64px; top: -24px; border-radius: 50%; border-top: 1px solid #e6e6e6; background-color: #FFF; } .bulge .image{ position: absolute; width: 50px; height: 50px; top: -16px; } .bulge .tab-bar-view{ position: relative; bottom: -16px; margin-top: 4px; } .tab-bar-item .tab-bar-view { font-size: 12px; margin-top: 4px; }
4. json 代码 { "component": true }

四、配置 tab 页

在每一个 tab 页的onShow函数中写入下面的代码，其中 selected 的值为每个 tab 的索引

onShow: function () {
          
   
    if (typeof this.getTabBar === function && this.getTabBar()) {
          
   
        this.getTabBar().setData({
          
   
            // 首页为 0
            selected: 0
        })
    }
},

获取项目源代码