关于小程序底部凸起实现(自定义tabbar)
关于如何自定义tabbar,可以参考官方文档(写的比较详细)
源码如下(参考网上代码,按自己理解做了一些优化)仅供参考
index.js
Component({
data: {
color: "#515151",
selectedColor: "#DAA520",
backgroundColor: "#ffffff",
list: [
{
pagePath: "/pages/index/index",
text: "流水",
iconPath: "/img/income.png",
selectedIconPath: "/img/income-select.png"
},
{
pagePath: "/pages/chart/chart",
text: "图表",
iconPath: "/img/chart.png",
selectedIconPath: "/img/chart-select.png"
},
{
pagePath: "/pages/record/record",
bulge:true,
iconPath: "/img/post.png",
selectedIconPath: "/img/post-select.png"
},
{
pagePath: "/pages/message/message",
text: "消息",
iconPath: "/img/message.png",
selectedIconPath: "/img/message-select.png"
},
{
pagePath: "/pages/home/home",
text: " 我家",
iconPath: "/img/home.png",
selectedIconPath: "/img/home-select.png"
}
]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
}
}
})
index.json
{
"component": true
}
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 src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view wx:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
</view>
</view>
index.wxss
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
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: 27px;
height: 27px;
}
.bulge {
background-color: #FFF;
}
.bulge .tab-bar-bulge {
position: absolute;
z-index: -1;
top: -10px;
width: 80px;
height: 80px;
border-radius: 50%;
border-top: 1px solid #e6e6e6;
background-color: #FFF;
}
.bulge image{
position: absolute;
width: 45px;
height: 45px;
top: -12px;
padding-top: 10px;
}
.tab-bar-item view {
font-size: 10px;
}
注意:自定义的tabBar需要在页面js里实现
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
},
欢迎体验
如有问题欢迎评论区交流