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.
121 lines
2.2 KiB
121 lines
2.2 KiB
<template> |
|
<view class="container"> |
|
<view class="item" v-for="item,index in menuList"> |
|
<image :src="currentPage == index ? item.selectedIconPath :item.iconPath" @click="jump(item.pagePath)"></image> |
|
<!-- {{index}} --> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
currentPage: Number |
|
}, |
|
data() { |
|
return { |
|
menuList: [{ |
|
// 首页 |
|
"pagePath": "/pages/tabbar/home/home", |
|
"iconPath": "../../static/img/tabbar/home.png", |
|
"selectedIconPath": "../../static/img/tabbar/homeactive.png" |
|
}, |
|
{ |
|
// 油站 |
|
"pagePath": "/pages/tabbar/station/stationList", |
|
"iconPath": "../../static/img/tabbar/oil.png", |
|
"selectedIconPath": "../../static/img/tabbar/oilactive.png" |
|
|
|
}, |
|
{ |
|
// 加油 |
|
"pagePath": "/pages/tabbar/qrCenter/qrCenter", |
|
"iconPath": "../../static/img/tabbar/icon.png", |
|
"selectedIconPath": "../../static/img/tabbar/icon.png" |
|
}, |
|
|
|
{ |
|
// 订单 |
|
"pagePath": "/pages/tabbar/order/orderList/orderList", |
|
"iconPath": "../../static/img/tabbar/order.png", |
|
"selectedIconPath": "../../static/img/tabbar/orderactive.png" |
|
}, |
|
{ |
|
// 司机 |
|
"pagePath": "/pages/tabbar/user/user", |
|
"iconPath": "../../static/img/tabbar/me.png", |
|
"selectedIconPath": "../../static/img/tabbar/meactive.png" |
|
} |
|
] |
|
} |
|
}, |
|
methods: { |
|
jump(path) { |
|
console.log('path',path) |
|
uni.switchTab({ |
|
url:path |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.container { |
|
display: flex; |
|
position: fixed; |
|
left: 0; |
|
bottom: 0; |
|
width: 100%; |
|
height: 120rpx; |
|
background: #fff; |
|
|
|
.item { |
|
position: relative; |
|
flex: 1; |
|
text-align: center; |
|
line-height: 120rpx; |
|
|
|
image { |
|
width: 50rpx; |
|
height: 50rpx; |
|
|
|
} |
|
|
|
&:nth-of-type(2) { |
|
image { |
|
position: relative; |
|
left: -13rpx |
|
} |
|
|
|
; |
|
} |
|
|
|
&:nth-of-type(4) { |
|
image { |
|
position: relative; |
|
right: -13rpx |
|
} |
|
|
|
; |
|
} |
|
|
|
&:nth-of-type(3) { |
|
flex: none; |
|
width: 110rpx; |
|
height: 110rpx; |
|
position: relative; |
|
transform: translateY(-30%); |
|
border-radius: 100%; |
|
overflow: hidden; |
|
background: #fff; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
} |
|
</style>
|
|
|