100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
<template>
|
|
<!-- 工作台底部菜单 -->
|
|
<view class="custom-tabbar">
|
|
<view v-for="item in state.list" :key="item.text" @click="handleClick(item)">
|
|
<view>
|
|
<image
|
|
:src="`${url}/static/img/tabbar/${select === item.text ? item.activeIcon : item.icon}`"
|
|
class="custom-img"
|
|
></image>
|
|
</view>
|
|
<view :class="{'active': select === item.text}">
|
|
{{ item.text }}
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <view v-for="item in state.list" :key="item.text">
|
|
<image
|
|
:src="`${url}/static/110/tabBar/${item.icon}`"
|
|
class="custom-img"
|
|
></image>
|
|
<view>
|
|
{{ item.text }}
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onLaunch } from "@dcloudio/uni-app";
|
|
import { url } from "@/utils/data";
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
select: string;
|
|
}>(),
|
|
{
|
|
select: "首页",
|
|
}
|
|
);
|
|
type tabBar = {
|
|
text: string;
|
|
icon: string;
|
|
activeIcon: string;
|
|
path: string;
|
|
};
|
|
const state = reactive({
|
|
list: [
|
|
{
|
|
text: "首页",
|
|
icon: "home.png",
|
|
activeIcon: "home-active.png",
|
|
path: "/pagesHome/index",
|
|
},
|
|
{
|
|
text: "我的",
|
|
icon: "user.png",
|
|
activeIcon: "user-active.png",
|
|
// path: "/pagesLogin/profile/index",
|
|
path: "/pagesHome/profile",
|
|
},
|
|
],
|
|
});
|
|
const handleClick = (item: tabBar) => {
|
|
// uni.reLaunch({
|
|
// url: item.path, // 要跳转到的页面路径
|
|
// });
|
|
uni.switchTab({
|
|
url: item.path, // 要跳转到的页面路径
|
|
});
|
|
};
|
|
|
|
onLaunch(() => {
|
|
//隐藏官方的tabBar
|
|
uni.hideTabBar();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-tabbar {
|
|
background: #ffffff;
|
|
// box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
|
|
border-radius: 13rpx 13rpx 0rpx 0rpx;
|
|
border-top: 1px solid rgba(0,0,0,0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
.custom-img {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
.active {
|
|
color: $u-primary;
|
|
}
|
|
}
|
|
</style>
|