You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.5 KiB
130 lines
2.5 KiB
<template>
|
|
<view class="tabbar-box">
|
|
<view class="bar-box" @click="clickBar(index)" v-for="(item,index) in tabList" :key="index">
|
|
<view class="img-box">
|
|
<image :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
|
|
</view>
|
|
<view class="text-box" :style="{color:item.isCheck?'#48D1CC':'#000'}">
|
|
{{item.tabName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList: [{
|
|
tabName: '工作台',
|
|
tabIcon: '/static/image/inventory.png',
|
|
tabIconSelect: '/static/image/inventory-sel.png',
|
|
isCheck: true
|
|
}, {
|
|
tabName: '订单',
|
|
tabIcon: '/static/image/billing.png',
|
|
tabIconSelect: '/static/image/billing-sel.png',
|
|
isCheck: false
|
|
}, {
|
|
tabName: '我的',
|
|
tabIcon: '/static/image/staff.png',
|
|
tabIconSelect: '/static/image/staff-sel.png',
|
|
isCheck: false
|
|
}]
|
|
}
|
|
},
|
|
props: {
|
|
//页面的宽度
|
|
width: {
|
|
type: Number,
|
|
default: true
|
|
},
|
|
//选中tab的下标
|
|
currentIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
watch: {
|
|
//监听currentIndex变化
|
|
currentIndex(newVal) {
|
|
for (let i = 0; i < this.tabList.length; i++) {
|
|
if (newVal == i) {
|
|
this.tabList[i].isCheck = true
|
|
} else {
|
|
this.tabList[i].isCheck = false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//点击tab切换
|
|
clickBar(index) {
|
|
for (let i = 0; i < this.tabList.length; i++) {
|
|
if (index == i) {
|
|
this.$emit('tab-index', i);
|
|
this.tabList[i].isCheck = true
|
|
} else {
|
|
this.tabList[i].isCheck = false
|
|
this.$forceUpdate()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tabbar-box {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 150rpx;
|
|
background: rgba(255, 255, 255, 1);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
z-index: 999;
|
|
border-top: 1px solid #eee;
|
|
border-top-left-radius: 60rpx;
|
|
border-top-right-radius: 60rpx;
|
|
}
|
|
|
|
.bar-box {
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.img-box {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin: 20rpx auto 10rpx;
|
|
cursor: pointer;
|
|
display: block;
|
|
transition: all 0.3s;
|
|
transform-origin: center center;
|
|
user-select: none;
|
|
}
|
|
|
|
.img-box image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background-size: 100%;
|
|
}
|
|
.big-img-box image{
|
|
width: 80%;
|
|
height: 90%;
|
|
background-size: 100%;
|
|
margin: -20rpx 0 0 10%;
|
|
}
|
|
|
|
.text-box {
|
|
text-align: center;
|
|
font-size: 20rpx;
|
|
font-family: 'PingFang HK';
|
|
font-weight: bold;
|
|
}
|
|
.big-img-box{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|