99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<template>
|
|
<view class="bottom-nav">
|
|
<view
|
|
v-for="(nav, index) in navItems"
|
|
:key="index"
|
|
class="nav-item"
|
|
:class="{ active: index === activeIndex }"
|
|
@click="onNavClick(index)"
|
|
>
|
|
<image class="nav-icon" :src="getNavIcon(index)" mode="aspectFit"></image>
|
|
<text class="nav-text">{{ nav }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BottomNav',
|
|
props: {
|
|
navItems: {
|
|
type: Array,
|
|
default: () => ['首页', '申请租赁', '个人中心'],
|
|
},
|
|
activeIndex: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
iconConfig: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
methods: {
|
|
onNavClick(index) {
|
|
this.$emit('nav-click', index)
|
|
},
|
|
|
|
getNavIcon(index) {
|
|
const isActive = index === this.activeIndex
|
|
const icons = this.iconConfig
|
|
|
|
switch (index) {
|
|
case 0: // 首页
|
|
return isActive ? icons.HOME_ACTIVE : icons.HOME
|
|
case 1: // 申请租赁
|
|
return isActive ? icons.RENT_ACTIVE : icons.RENT
|
|
case 2: // 个人中心
|
|
return isActive ? icons.PERSONAL_CENTER_ACTIVE : icons.PERSONAL_CENTER
|
|
default:
|
|
return icons.HOME
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bottom-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 10rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-item:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.nav-text {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.nav-item.active .nav-text {
|
|
color: #ff9a9e;
|
|
}
|
|
</style>
|