xiaozy
xiaozhiyong
2 years ago
parent
e331393f09
commit
7bd17a3692
15 changed files with 497 additions and 265 deletions
|
After Width: | Height: | Size: 988 B |
@ -0,0 +1,121 @@ |
||||
<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> |
||||
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in new issue