微信小程序自定义tabBar样式,选中后中间凸起
效果预览
微信开发文档:自定义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 代码
-
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 class="tab-bar-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
</view>
</view>
-
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})
}
}
})
-
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;
}
-
json 代码 {
"component": true
}
四、配置 tab 页
在每一个 tab 页的onShow函数中写入下面的代码,其中 selected 的值为每个 tab 的索引
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
},
|