1054425342@qq.com
3 months ago
19 changed files with 528 additions and 121 deletions
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<view> |
|||
<!-- 遮罩层 --> |
|||
<view class="overlay" v-if="showMenu" @click="closeMenu"></view> |
|||
|
|||
<!-- 固定导航按钮 --> |
|||
<view class="fixed-nav" :class="{ hidden: showMenu }" @click="showNavMenu"> |
|||
<image |
|||
class="nav-icon" |
|||
:class="{ rotated: iconRotated, 'bounce-back': iconBounceBack }" |
|||
src="https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
</view> |
|||
|
|||
<!-- 侧边导航菜单 --> |
|||
<view class="nav-menu" :class="{ show: showMenu }"> |
|||
<view |
|||
class="nav-item" |
|||
:class="{ 'item-active': isItemActive(item) }" |
|||
v-for="item in menuItems" |
|||
:key="item.targetIndex" |
|||
@click="() => jumpToPage(item.targetIndex)" |
|||
> |
|||
<view v-if="item.text.includes('#Chapter')" class="chapter-text"> |
|||
<text class="chapter-title">#Chapter</text> |
|||
<text :class="{ active: isItemActive(item) }" class="chapter-number"> |
|||
{{ item.text.replace("#Chapter", "") }} |
|||
</text> |
|||
</view> |
|||
<text v-else :class="{ active: isItemActive(item) }">{{ |
|||
item.text |
|||
}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "SideNav", |
|||
props: { |
|||
currentIndex: { |
|||
type: Number, |
|||
default: 0, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
showMenu: false, |
|||
iconRotated: false, |
|||
iconBounceBack: false, |
|||
menuItems: [ |
|||
{ |
|||
text: "序章", |
|||
targetIndex: 0, |
|||
path: "/pig/home/home", |
|||
}, |
|||
{ |
|||
text: "第一章猪的起源", |
|||
targetIndex: 4, |
|||
path: "/pig/chapter1/chapter1", |
|||
}, |
|||
{ |
|||
text: "第二章驯为良伴", |
|||
targetIndex: 5, |
|||
path: "/pig/chapter2/chapter2", |
|||
}, |
|||
{ |
|||
text: "第三章身份之谜", |
|||
targetIndex: 6, |
|||
path: "/pig/chapter3/chapter3", |
|||
}, |
|||
{ |
|||
text: "第四章 东方之猪", |
|||
targetIndex: 7, |
|||
path: "/pig/chapter4/chapter4", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
methods: { |
|||
showNavMenu() { |
|||
this.iconRotated = true; |
|||
setTimeout(() => { |
|||
this.showMenu = true; |
|||
}, 300); |
|||
}, |
|||
closeMenu() { |
|||
this.showMenu = false; |
|||
setTimeout(() => { |
|||
this.iconBounceBack = true; |
|||
this.iconRotated = false; |
|||
setTimeout(() => { |
|||
this.iconBounceBack = false; |
|||
}, 500); |
|||
}, 300); |
|||
}, |
|||
jumpToPage(targetIndex) { |
|||
const menuItem = this.menuItems.find( |
|||
(item) => item.targetIndex === targetIndex |
|||
); |
|||
if (menuItem) { |
|||
// 如果有path属性，进行页面跳转 |
|||
if (menuItem.path) { |
|||
uni.navigateTo({ |
|||
url: |
|||
menuItem.path + |
|||
(targetIndex > 0 ? `?targetIndex=${targetIndex}` : ""), |
|||
}); |
|||
} else { |
|||
// 否则触发事件让父组件处理 |
|||
this.$emit("navigate", targetIndex); |
|||
} |
|||
} |
|||
this.closeMenu(); |
|||
}, |
|||
isItemActive(item) { |
|||
return this.currentIndex === item.targetIndex; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
z-index: 10; |
|||
} |
|||
|
|||
.fixed-nav { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
background-color: rgb(0 0 0 / 0.7); |
|||
border-radius: 10rpx 0 0 10rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 9; |
|||
transition: transform 0.3s ease, opacity 0.3s ease; |
|||
} |
|||
|
|||
.fixed-nav.hidden { |
|||
transform: translateX(100%); |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.nav-icon { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.nav-icon.rotated { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
.nav-icon.bounce-back { |
|||
animation: bounceRotation 0.5s ease; |
|||
} |
|||
|
|||
@keyframes bounceRotation { |
|||
0% { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
50% { |
|||
transform: rotate(-20deg); |
|||
} |
|||
|
|||
75% { |
|||
transform: rotate(10deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(0deg); |
|||
} |
|||
} |
|||
|
|||
.nav-menu { |
|||
position: fixed; |
|||
top: 50%; |
|||
right: 0; |
|||
transform: translate(100%, -50%); |
|||
z-index: 11; |
|||
background-color: rgba(255, 255, 255, 0.95); |
|||
border-radius: 16rpx 0 0 16rpx; |
|||
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1); |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.nav-menu.show { |
|||
transform: translate(0, -50%); |
|||
} |
|||
|
|||
.nav-item { |
|||
padding: 20rpx; |
|||
text-align: center; |
|||
|
|||
text { |
|||
color: #333; |
|||
opacity: 0.7; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.item-active { |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.nav-item .active { |
|||
color: #333; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.chapter-text { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
line-height: 1.3; |
|||
} |
|||
|
|||
.chapter-title { |
|||
color: #333; |
|||
opacity: 0.7; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.chapter-number { |
|||
color: #333; |
|||
opacity: 0.7; |
|||
font-size: 28rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
|
|||
.item-active .chapter-title, |
|||
.item-active .chapter-number.active { |
|||
opacity: 1; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue