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.
84 lines
1.6 KiB
84 lines
1.6 KiB
<template> |
|
<view class="tab"> |
|
<view @click="gotabber(item)" v-for="(item,index) in tabberlist"> |
|
<image :src="Number(selecttb)==index+1?item.selecticon:item.icon"></image> |
|
<view :class="Number(selecttb)==index+1?'xz':''">{{item.name}}</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import {ref} from 'vue' |
|
export default { |
|
name:"tabber", |
|
props:['selecttb'], |
|
setup(props) { |
|
// console.log(props.selecttb); |
|
// let xztb=ref(props.selecttb) |
|
let tabberlist=ref([ |
|
{ |
|
name:'首页', |
|
icon:'../../static/tabber/home.png', |
|
selecticon:'../../static/tabber/homexz.png', |
|
page:'/pages/index/index' |
|
}, |
|
{ |
|
name:'市场', |
|
icon:'../../static/tabber/shichang.png', |
|
selecticon:'../../static/tabber/shichangxz.png', |
|
page:'/pages/market/market' |
|
}, |
|
{ |
|
name:'我的', |
|
icon:'../../static/tabber/user.png', |
|
selecticon:'../../static/tabber/userxz.png', |
|
page:'/pages/user/user' |
|
} |
|
]) |
|
function gotabber(item){ |
|
uni.redirectTo({ |
|
url:item.page |
|
}) |
|
} |
|
return { |
|
tabberlist, |
|
gotabber |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.tab{ |
|
position: fixed; |
|
bottom:30upx; |
|
left: 50%; |
|
transform: translate(-50%); |
|
width: 632upx; |
|
height: 112upx; |
|
background: #393939; |
|
border-radius: 56upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
margin: auto; |
|
z-index: 1000; |
|
>view{ |
|
width: 50%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
color: #8D8C9F; |
|
font-size: 20upx; |
|
>image{ |
|
width: 48upx; |
|
height: 48upx; |
|
margin-bottom: 10upx; |
|
} |
|
.xz{ |
|
color: #ffffff !important; |
|
} |
|
} |
|
} |
|
</style> |