3 changed files with 2614 additions and 9 deletions
File diff suppressed because it is too large
@ -0,0 +1,130 @@ |
|||
<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> |
|||
Loading…
Reference in new issue