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.
97 lines
2.0 KiB
97 lines
2.0 KiB
2 months ago
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="tabber">
|
||
|
|
<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
|
||
|
|
},
|
||
|
|
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
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
.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>
|