zhaichao/oa_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移除旧版tabbar

Browse Source
This commit is contained in:
zhaichao
2026-09-23 18:44:28 +08:00
parent 9ad38418c0
commit c5245b0441
1 changed files with 0 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
custom-tab-bar/index.vue
-125
View File
@@ -1,125 +0,0 @@
<template>
<wd-tabbar
v-model="active"
fixed
bordered
safe-area-inset-bottom
placeholder
active-color="#1677FF"
inactive-color="#8A9199"
@change="onChange"
>
<wd-tabbar-item title="消息">
<template #icon="{ active }">
<view class="ico" :class="{ on: active }"><view class="bubble" /><view class="tail" /></view>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="通讯录">
<template #icon="{ active }">
<view class="ico heads" :class="{ on: active }">
<view class="head"><view class="dot" /><view class="body" /></view>
<view class="head b"><view class="dot" /><view class="body" /></view>
</view>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="打卡">
<template #icon="{ active }">
<view class="ico" :class="{ on: active }"><view class="clock"><view class="hh" /><view class="mh" /></view></view>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="工作台">
<template #icon="{ active }">
<view class="ico grid" :class="{ on: active }">
<view /><view /><view /><view />
</view>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="我">
<template #icon="{ active }">
<view class="ico" :class="{ on: active }"><view class="me"><view class="dot" /><view class="body" /></view></view>
</template>
</wd-tabbar-item>
</wd-tabbar>
</template>
<script>
const PATHS = [
'/pages/tabs/messages',
'/pages/tabs/contacts',
'/pages/tabs/clock',
'/pages/tabs/workbench',
'/pages/tabs/me'
]
export default {
data() {
return { active: 0 }
},
mounted() {
this.sync()
uni.$on('fy-tab', (i) => { this.active = i })
},
unmounted() {
uni.$off('fy-tab')
},
methods: {
sync() {
const pages = getCurrentPages()
const route = pages.length ? '/' + pages[pages.length - 1].route : ''
const i = PATHS.indexOf(route)
if (i >= 0) this.active = i
},
onChange({ value }) {
const url = PATHS[value]
if (url) uni.switchTab({ url })
}
}
}
</script>
<style scoped>
.ico { width: 44rpx; height: 44rpx; position: relative; }
.bubble {
width: 30rpx; height: 22rpx; margin: 6rpx auto 0;
border: 3rpx solid #8A9199; border-radius: 8rpx; box-sizing: border-box;
}
.on .bubble { border-color: #1677FF; }
.tail {
width: 0; height: 0; margin-left: 14rpx;
border-top: 8rpx solid #8A9199; border-right: 8rpx solid transparent;
}
.on .tail { border-top-color: #1677FF; }
.heads { display: flex; align-items: flex-end; height: 44rpx; padding-left: 2rpx; }
.head {
width: 22rpx; display: flex; flex-direction: column; align-items: center;
}
.head.b { margin-left: -6rpx; }
.dot {
width: 12rpx; height: 12rpx; border: 3rpx solid #8A9199; border-radius: 50%; box-sizing: border-box;
}
.body {
width: 18rpx; height: 8rpx; margin-top: 2rpx;
border: 3rpx solid #8A9199; border-bottom: none; border-radius: 10rpx 10rpx 0 0; box-sizing: border-box;
}
.on .dot, .on .body { border-color: #1677FF; }
.clock {
width: 30rpx; height: 30rpx; margin: 6rpx auto 0;
border: 3rpx solid #8A9199; border-radius: 50%; box-sizing: border-box; position: relative;
}
.on .clock { border-color: #1677FF; }
.hh, .mh { position: absolute; background: #8A9199; border-radius: 2rpx; }
.on .hh, .on .mh { background: #1677FF; }
.hh { width: 3rpx; height: 10rpx; left: 12rpx; top: 4rpx; }
.mh { width: 8rpx; height: 3rpx; left: 12rpx; top: 12rpx; }
.grid {
width: 32rpx; height: 32rpx; margin: 6rpx auto 0;
display: flex; flex-wrap: wrap; gap: 4rpx;
}
.grid view {
width: 12rpx; height: 12rpx; border: 3rpx solid #8A9199; border-radius: 3rpx; box-sizing: border-box;
}
.on .grid view { border-color: #1677FF; }
.me { display: flex; flex-direction: column; align-items: center; padding-top: 4rpx; }
.me .dot { width: 14rpx; height: 14rpx; }
.me .body { width: 26rpx; height: 10rpx; }
</style>