第一步：建立一个文件夹里面放置组件（tabbar为组件）
第二步编辑：
wxml：
<view class='allfooter'>
<view class='footer-one'>
<view class='foot-img' bindtap='change1'>
<image src='{{tarbar.shouye.active?"照片1":"照片2"}}'></image>
<text>首页</text>
</view>
<view class='foot-img' bindtap='change2'>
<image src='{{tarbar.shanghu.active?"照片1":"照片2"}}'></image>
<text>商户</text>
</view>
<view class='foot-img'>
<image src='中间的照片' bindtap='dowhat'></image>
</view>
<view class='foot-img' bindtap='change3'>
<image src='"照片1":"照片2"}}'></image>
<text>停车</text>
</view>
<view class='foot-img' bindtap='change4'>
<image src='{{tarbar.wode.active?"照片1":"照片2"}'></image>
<text>我的</text>
</view>
</view>
<view class='footer-two' wx:if ="{{show}}"></view>
</view>
wxss：
.allfooter{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
.allfooter .footer-one{
width: 100%;
height: 10vh;
}
.allfooter .footer-two{
width: 100%;
height: 60rpx;
}
.allfooter .footer-one .foot-img{
width: 20%;
height: 10vh;
float: left;
text-align: center;
position: relative
}
.allfooter .footer-one .foot-img image{
width: 44rpx;
height: 44rpx;
margin-top: 20rpx;
}
.allfooter .footer-one .foot-img text{
font-size:24rpx;
display: block
}
.allfooter .footer-one .foot-img:nth-child(3) image{
width: 150rpx;
height: 150rpx;
position: absolute;
left: 0;
right: 0;
bottom: 30rpx;
margin:auto;
}
js:
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
tarbar:{
shouye:{
name:"pages/index/index",
active:false
},
shanghu: {
name: "pages/logs/logs",
active: false
},
tingche: {
name: "",
active: false
},
wode: {
name: "",
active: false
}
}
},
/**
* 组件的方法列表
*/
methods: {
//点击跳转
change1(){
wx.redirectTo({
url: "/"+this.data.tarbar.shouye.name,
})
},
},
ready(){
var that =this
//获取当前页面
console.log(getCurrentPages()[0].route)
for (var x in this.data.tarbar) {
console.log(this.data.tarbar[x])
if (this.data.tarbar[x].name == getCurrentPages()[0].route) {
var param = this.data.tarbar
param[x].active = true
this.setData({
tarbar: param
})
}
}
}
})
第三步 ：全局配置（在app.json中）
第四步：使用
在需要使用的wxml中添加 <tabbar></tabbar> 标签