爱简收旧衣按件回收前端代码仓库
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.
 
 
 
 

132 lines
2.6 KiB

<template>
<view class="tab-bar">
<view
v-for="(item, index) in tabList"
:key="index"
class="tab-item"
:class="{ active: currentPath === item.pagePath }"
@tap="switchTab(item.pagePath)"
>
<view class="icon-box">
<image
:src="currentPath === item.pagePath ? item.selectedIcon : item.icon"
mode="aspectFit"
class="tab-icon"
/>
</view>
<text class="tab-text">{{ item.text }}</text>
</view>
</view>
</template>
<script>
export default {
name: 'AdminTabBar',
data() {
return {
currentPath: '',
tabList: [
{
pagePath: '/pages/component/admin_home',
text: '首页',
icon: '/static/logo.png',
selectedIcon: '/static/111.png'
},
{
pagePath: '/pages/component/role_management',
text: '角色管理',
icon: '/static/logo.png',
selectedIcon: '/static/111.png'
},
{
pagePath: '/pages/component/admin_my',
text: '我的',
icon: '/static/logo.png',
selectedIcon: '/static/111.png'
}
]
}
},
methods: {
switchTab(path) {
// 更新当前路径
this.currentPath = path
console.log(path);
// 执行页面跳转
uni.switchTab({
url: path,
fail: () => {
// this.$forceUpdate();
uni.navigateTo({
url: path
})
}
})
this.currentPath = path
},
// 初始化当前页面路径
initCurrentPath() {
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
this.currentPath = `/${currentPage.route}`
}
}
},
mounted() {
this.initCurrentPath()
},
onShow() {
this.initCurrentPath()
}
}
</script>
<style lang="scss" scoped>
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
background: #FFFFFF;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
border-top: 1rpx solid #F5F5F5;
z-index: 1000;
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10rpx 0;
.icon-box {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
.tab-icon {
width: 44rpx;
height: 44rpx;
}
}
.tab-text {
font-size: 24rpx;
color: #999999;
margin-top: 4rpx;
}
&.active {
.tab-text {
color: #00C853;
}
}
}
}
</style>