步骤:
1、在文件根目录下创建一个文件夹:custom-tab-bar并分别创建 (js,json,wxml,wxss)类型文件
2、在pages.json中设置tabbar中的custom为true(true自定义,false默认系统)
3、index.js代码如下:
Component({
data: {
selected: 0,//当前选中的tab下标
color: "#1E1E1E",
selectedColor: "#646464",//tabbar选中字体颜色
list: [{
"pagePath": "/pages/index/index",
"iconPath": "/static/common/tabbar-img/find-unselected.png",
"selectedIconPath": "/static/common/tabbar-img/find-selected.png",
"text": "发现"
},
{
"pagePath": "/pages/card-list/index",
"iconPath": "/static/common/tabbar-img/cupon2.png",
"selectedIconPath": "/static/common/tabbar-img/cupon2.png",
"text": '',
diyClass: "diy"
},
{
"pagePath": "/pages/mine/index",
"iconPath": "/static/common/tabbar-img/mine-unselected.png",
"selectedIconPath": "/static/common/tabbar-img/mine-selected.png",
"text": "我的"
}
],//tabbar循环数据集
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset;
const url = data.path
this.setData({
selected: data.index
})
wx.switchTab({url})
}
},
})
4、index.json中代码如下:
{
"component": true
}
5、index.html代码如下:
<view class="tab-bar">
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="{{item.diyClass}}" mode="aspectFit"/>
<view style="color: {{selected === index ? selectedColor : color}}" class="{{item.diyClass}}">{{item.text}}</view>
</view>
</view>
6、index.wxss代码:
/*重新样式*/
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05);
box-sizing: content-box;
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fff;
height: 120rpx;
}
.tab-bar-item.diy {
margin-top: 0!important;
background: transparent;
position: relative;
flex: inherit;
width: 134rpx;
}
.tab-bar-item image {
width: 48rpx;
height: 48rpx;
overflow: initial;
}
.tab-bar-item view {
font-size: 24rpx;
}
.tab-bar-item image.diy {
position: absolute;
width: 134rpx;
height: 140rpx;
bottom: 25.6%;
z-index: 100;
}
.tab-bar-item view.diy {
margin-top: 90rpx;
background: #fff;
width: 100%;
height: 100%;
padding-top: 58rpx;
z-index: 99;
}
7、在main.js中添加兼容小程序自定义tabbar
Vue.mixin({
methods:{
setTabBarIndex(index) {
if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: index
})
}
}
}
})
8、在项目中tabBar 页面,onShow生命周期中设置:
this.setTabBarIndex(1);
注意this.setTabBarIndex(1);中的1是指当前tabbar页面位于index.js中list集合的下标
比如pages/index/index.vue 中执行的是this.setTabBarIndex(0);
好了,再次运行一下,基本可以兼容ios和安卓的所有机型了。
最后贴一下凸起透明效果的切图
只切红框部分,圆的上半部分和周围要是透明色,只有底部是白色,这个跟UI沟通就可以,直接能切下来;