<view class="tab">
<view class="row" wx:for="{{tabbar}}" wx:key="{{index}}" data-index="{{index}}" catchtap="gettab">
<view class="icon">
<image mode="widthFix" wx:if="{{active != index}}" src="{{item.icon}}">image>
<image mode="widthFix" wx:if="{{active == index}}" src="{{item.selectIcon}}">image>
view>
<view class="text {{active == index ? 'textSelect' : ''}}">{{item.text}}view>
view>
view>
tabbar.wxss
.tab {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: space-around;
border-top: 1rpx solid #f5f5f5;
}
.row {
display: flex;
align-items: center;
flex-direction: column;
width: 33%;
height: 100%;
justify-content: space-around;
}
.icon {
width: 55rpx;
height: 55rpx;
}
image {
width: 100%;
height: 100%;
}
.text {
font-size: 20rpx;
color: #bfbfbf;
}
.textSelect {
color: #00C6C2 !important;
}
tabbar.js
Component({
properties: {
active: String,
},
data: {
tabbar: [{
icon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-1.png",
selectIcon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-a1.png",
text: "全部商品",
}, {
icon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-2.png",
selectIcon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-a2.png",
text: "购物车",
}, {
icon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-3.png",
selectIcon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-a3.png",
text: "我的订单",
}]
},
methods: {
gettab(e) {
var index = e.currentTarget.dataset.index
switch (index) {
case 0:
wx.redirectTo({
url: "../buyGuide/buyGuide"
})
break;
case 1:
wx.redirectTo({
url: "../shopCart/shopCart"
})
break;
case 2:
wx.redirectTo({
url: "../userOrder/userOrder"
})
break;
}
// this.setData({
// active: index
// })
}
}
})
tabbar.json
{
"component": true,
"usingComponents": {}
}
引入的页面
index.wxml
<view>
<tabbar active="0">tabbar>
view>
index.json
{
"navigationBarTitleText": "全部产品",
"usingComponents": {
"tabbar": "../../component/tabbar/tabbar"
}
}
二丶判断显示多少个tabbar
3个
2个
(1)在components新建tabbar文件
tabbar.html
<cover-view class="tabbar_tab">
<cover-view class="row" wx:for="{{tabbarList}}" wx:key="index" data-item="{{item}}" data-index="{{index}}"
bindtap="avtiveTab">
<cover-view class="icon">
<cover-image mode="widthFix" src="{{active == index ? item.selectIcon: item.icon}}">cover-image>
cover-view>
<cover-view class="tabbar_text {{active == index ? 'textSelect' : ''}}">{{item.text}}cover-view>
cover-view>
cover-view>
tabbar.css
.tabbar_tab {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: space-around;
border-top: 1rpx solid #f5f5f5;
}
.row {
display: flex;
align-items: center;
flex-direction: column;
width: 33%;
height: 100%;
justify-content: space-around;
}
.icon {
width: 55rpx;
height: 55rpx;
}
cover-image {
width: 100%;
height: 100%;
}
.tabbar_text {
font-size: 20rpx;
color: #bfbfbf;
}
.textSelect {
color: red !important;
}
tabbar.js
Component({
properties: {
active: String,
},
data: {
tabbarList: [],
},
methods: {
avtiveTab(e) {
var index = e.currentTarget.dataset.index
var item = e.currentTarget.dataset.item
if (this.data.active != index) {
wx.redirectTo({
url: item.skipUrl
})
}
},
changeTab() {
console.log(123)
var typeUser = wx.getStorageSync('typeUser')
//取出在app.js存储的状态
console.log(typeUser)
if (typeUser == 1) {
var array = [{
icon: "../../images/quanzi_2.png",
selectIcon: "../../images/quanzi_1.png",
skipUrl: "../index/index",
text: "广场",
}, {
icon: "../../images/recommend_2.png",
selectIcon: "../../images/recommend_1.png",
skipUrl: "../circle/circle",
text: "圈子",
}, {
icon: "../../images/wode_2.png",
selectIcon: "../../images/wode_1.png",
skipUrl: "../mine/mine",
text: "我的",
}]
this.setData({
tabbarList:array
})
} else {
var list = [{
icon: "../../images/quanzi_2.png",
selectIcon: "../../images/quanzi_1.png",
skipUrl: "../index/index",
text: "广场",
}, {
icon: "../../images/recommend_2.png",
selectIcon: "../../images/recommend_1.png",
skipUrl: "../circle/circle",
text: "圈子",
}]
this.setData({
tabbarList: list
})
}
},
},
// 组件的生命周期
lifetimes: {
attached() {
// this.changeTab()
}
},
pageLifetimes: {
show: function() {
this.changeTab()
},
}
})
(2)app.js里面的onlaunch判断显示1为三个tabbar,0则为两个tabbar
wx.setStorageSync('typeUser', 0)
(3)index.html引入tabbar组件
<view>
<tabbar active="0">tabbar>
view>
index.json
"usingComponents": {
"tabbar": "../../components/tabbar/tabbar"
},
(4)点击页面某个部分升级为三个tabbar
cicle.html
<view class="yincanTabar">
<tabbar id="tabbar">tabbar>
view>
cicle.json
"usingComponents": {
"tabbar": "../../components/tabbar/tabbar"
},
cicle.js
get(){
wx.setStorageSync('typeUser', 1)
var tabbar = this.selectComponent("#tabbar")
tabbar.changeTab()
}
此页面如果不想显示tabbar就隐藏掉
.yincanTabar {
opacity: 0;
display: none;
}