⼩程序底部tabbar⾃定义实现凸起+透明底部效果先上图看效果：
步骤：
1、在⽂件根⽬录下创建⼀个⽂件夹：custom-tab-bar并分别创建 (js，json,wxml,wxss）类型⽂件
2、在pages.json中设置tabbar中的custom为true(true⾃定义，false默认系统)
3、index.js代码如下：
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",
网站底部代码js特效"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 class="{{item.diyClass}}">{{}}</view>
</view>
</view>
6、index.wxss代码：
/*重新样式*/
.tab-bar {
position: fixed;
bottom:0;
left:0;
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
setTabBarIndex(index){
if(typeof this.$TabBar ==='function'&&
this.$TabBar()){
this.$TabBar().setData({
selected: index
})
}
}
}
})
8、在项⽬中tabBar 页⾯,onLoad⽣命周期中设置：
this.setTabBarIndex(1);
uni.hideTabBar()
注意this.setTabBarIndex(1)；中的1是指当前tabbar页⾯位于index.js中list集合的下标⽐如pages/index/index.vue 中执⾏的是this.setTabBarIndex(0);
好了，再次运⾏⼀下，基本可以兼容ios和安卓的所有机型了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。