- 添加 m-tabBar 组件，用于替换原生 TabBar - 在各个页面中集成 m-tabBar 组件 - 调整页面样式以适应新的 TabBar - 移除 pages.json 中的原生 TabBar 配置lu_quan_dev
parent
53669d5448
commit
f400808ac6
@ -0,0 +1,122 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<view class="tab-bar-box"> |
||||
<view class="tab-bar-item" v-for="(item, index) in menu" :class="{ 'active': activeIndex == index }" |
||||
@click="handleClick(item.path)"> |
||||
<view class="bar-icon"> |
||||
<image class="bar-img" :src="activeIndex == index ? item.iconA : item.icon"></image> |
||||
</view> |
||||
<view class="bar-text"> |
||||
{{ item.name }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
activeIndex: { |
||||
type: Number, |
||||
default: 0 |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
menu: [ |
||||
{ |
||||
name: '首页', |
||||
path: '/pages/index/index', |
||||
index: 0, |
||||
icon: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/home.png', |
||||
iconA: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/home_active.png' |
||||
}, |
||||
{ |
||||
name: '附近', |
||||
path: '/pages/zhoubian/zhoubian/zhoubian', |
||||
index: 1, |
||||
icon: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/fujin.png', |
||||
iconA: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/fujin_active.png' |
||||
}, |
||||
{ |
||||
name: '服务', |
||||
path: '/pages/fuwu/fuwu', |
||||
index: 2, |
||||
icon: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/fuwu.png', |
||||
iconA: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/fuwu_active.png' |
||||
}, |
||||
{ |
||||
name: '我的', |
||||
path: '/pages/personcenter/personcenter', |
||||
index: 3, |
||||
icon: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/my.png', |
||||
iconA: 'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tabBar/my_active.png' |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleClick(path) { |
||||
uni.reLaunch({ |
||||
url: path |
||||
}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped |
||||
lang="scss"> |
||||
.container { |
||||
width: 90%; |
||||
height: 110rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 6rpx 30rpx 0rpx rgba(6, 0, 1, 0.15); |
||||
border-radius: 55rpx; |
||||
position: fixed; |
||||
z-index: 9; |
||||
bottom: 50rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
|
||||
.tab-bar-box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-evenly; |
||||
|
||||
.tab-bar-item { |
||||
height: fit-content; |
||||
padding: 15rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
font-size: 20rpx; |
||||
color: #A1A7AD; |
||||
|
||||
.bar-icon { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
|
||||
.bar-img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.bar-text{ |
||||
margin-top: 5rpx; |
||||
} |
||||
} |
||||
|
||||
.active { |
||||
font-family: Source Han Sans SC; |
||||
font-weight: 400; |
||||
font-size: 20rpx; |
||||
color: #0983FF; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
Before Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in new issue