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.
113 lines
2.5 KiB
113 lines
2.5 KiB
<template> |
|
<view :class="setClass"> |
|
<view class="tabber" v-if="isTab"> |
|
<view |
|
:class="{ tab: true, isActive: tab.code == selected }" |
|
v-for="(tab, index) in tabbers" |
|
:key="index" |
|
@click="changeTab(tab)" |
|
> |
|
<u--image :src="tab.icon" width="42px" height="42px" v-if="tab.type == 'middle'"></u--image> |
|
<u--image :src="selected == tab.code ? tab.selectIcon : tab.icon" width="24px" height="24px" v-else></u--image> |
|
<view class="name"> |
|
{{ tab.name }} |
|
</view> |
|
</view> |
|
</view> |
|
<view class="fit-content"></view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
selected: Number, |
|
isTab: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
data() { |
|
return { |
|
tabbers: [ |
|
{ |
|
name: '首页', |
|
path: '/pages/index', |
|
icon: '/static/images/tabbers/home.png', |
|
selectIcon: '/static/images/tabbers/home-select.png', |
|
code: 0 |
|
}, |
|
{ |
|
name: '任务', |
|
path: '/pages/task', |
|
icon: '/static/images/tabbers/task.png', |
|
selectIcon: '/static/images/tabbers/task-select.png', |
|
code: 1 |
|
}, |
|
{ |
|
name: '', |
|
path: '/pages/chat', |
|
icon: '/static/images/tabbers/chat.png', |
|
type: 'middle', |
|
code: 2 |
|
}, |
|
{ |
|
name: '企业', |
|
path: '/pages/enterprise', |
|
icon: '/static/images/tabbers/position.png', |
|
selectIcon: '/static/images/tabbers/position-select.png', |
|
code: 3 |
|
}, |
|
{ |
|
name: '我的', |
|
path: '/pages/owner', |
|
icon: '/static/images/tabbers/user.png', |
|
selectIcon: '/static/images/tabbers/user-select.png', |
|
code: 4 |
|
} |
|
] |
|
} |
|
}, |
|
computed: { |
|
setClass() { |
|
return this.$props.isTab ? 'container' : 'noTab' |
|
} |
|
}, |
|
methods: { |
|
changeTab(tab) { |
|
uni.switchTab({ |
|
url: tab.path, |
|
success: () => { |
|
this.isActive = tab.code |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.container { |
|
background-color: #fff; |
|
box-shadow: 0 -1px 2px 1px $cs-shadow-color; |
|
} |
|
.noTab { |
|
background-color: #fff; |
|
} |
|
.fit-content { |
|
height: 20px; |
|
} |
|
.tabber { |
|
height: 60px; |
|
display: flex; |
|
flex-flow: row nowrap; |
|
justify-content: space-around; |
|
align-items: center; |
|
.tab { |
|
transition: 0.2s all; |
|
} |
|
.isActive { |
|
color: #22c55e; |
|
} |
|
} |
|
</style>
|
|
|