jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

dev_xrcc
jiazhipeng 4 months ago
parent
c9f26d8174
commit
0f3f792c8d
9 changed files with 1028 additions and 1089 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components/MusicControl.vue
  2. 4
      pages.json
  3. 106
      xxdf/chapter1/cover1.vue
  4. 142
      xxdf/chapter1/detail1.vue
  5. 140
      xxdf/chapter1/detail2.vue
  6. 143
      xxdf/chapter1/detail3.vue
  7. 162
      xxdf/chapter1/detail4.vue
  8. 143
      xxdf/chapter1/detail5.vue
  9. 10
      xxdf/home/home.vue

1
components/MusicControl.vue
View File

@ -15,6 +15,7 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('初始化')
// 组件挂载时同步音乐状态 // 组件挂载时同步音乐状态
this.syncMusicState(); this.syncMusicState();

4
pages.json
View File

@ -167,9 +167,9 @@
] ]
}, },
{ {
"root": "xxdf", "root": "xxdf/home",
"pages": [{ "pages": [{
"path": "home/home", "path": "home",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"navigationStyle": "custom" "navigationStyle": "custom"

106
xxdf/chapter1/cover1.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<view>
<view class="chapter-cover"> <view class="chapter-cover">
<image class="cover-img" src="/static/images/chapter1/cover2.png" mode=""></image> <image class="cover-img" src="/static/images/chapter1/cover2.png" mode=""></image>
<view class="five-senses-content" @click="goFeel"> <view class="five-senses-content" @click="goFeel">
@ -34,57 +35,63 @@
<image @click="goback" class="btn" src="/static/images/chapter1/abandon-btn.png" mode=""></image> <image @click="goback" class="btn" src="/static/images/chapter1/abandon-btn.png" mode=""></image>
</view> </view>
<MusicControl /> <MusicControl />
</view>
</template> </template>
<script setup> <script>
const goback = ()=>{ export default {
methods: {
goback() {
uni.navigateBack({ uni.navigateBack({
delta:1 delta: 1
}) });
} },
const goFeel = ()=>{ goFeel() {
uni.navigateTo({ uni.navigateTo({
url:'/pages/chapter1/detail1' url: '/xxdf/chapter1/detail1'
}) });
} },
const goVision = ()=>{ goVision() {
uni.navigateTo({ uni.navigateTo({
url:'/pages/chapter1/detail2' url: '/xxdf/chapter1/detail2'
}) });
} },
const goHearing = ()=>{ goHearing() {
uni.navigateTo({ uni.navigateTo({
url:'/pages/chapter1/detail3' url: '/xxdf/chapter1/detail3'
}) });
} },
const goOlfactory = ()=>{ goOlfactory() {
uni.navigateTo({ uni.navigateTo({
url:'/pages/chapter1/detail4' url: '/xxdf/chapter1/detail4'
}) });
} },
const goGustation = ()=>{ goGustation() {
uni.navigateTo({ uni.navigateTo({
url:'/pages/chapter1/detail5' url: '/xxdf/chapter1/detail5'
}) });
} }
}
};
</script> </script>
<style scoped> <style scoped>
.chapter-cover { .chapter-cover {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: relative; position: relative;
} }
.cover-img { .cover-img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
.five-senses-content{
.five-senses-content {
position: absolute; position: absolute;
top: 32%; top: 32%;
right: 28%; right: 28%;
@ -92,42 +99,49 @@ const goGustation = ()=>{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.vision{
.vision {
top: 54% !important; top: 54% !important;
right: 47% !important; right: 47% !important;
} }
.hearing{
.hearing {
top: 62% !important; top: 62% !important;
right: 8% !important; right: 8% !important;
} }
.olfactory{
.olfactory {
top: 64% !important; top: 64% !important;
right: 76% !important; right: 76% !important;
} }
.gustation{
.gustation {
top: 73% !important; top: 73% !important;
right: 86% !important; right: 86% !important;
} }
.box1{
.box1 {
background: #fff; background: #fff;
border-radius: 50%; border-radius: 50%;
opacity: 0.4; opacity: 0.4;
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.senses-txt{
.senses-txt {
font-size: 24rpx; font-size: 24rpx;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
margin-top: 20rpx; margin-top: 20rpx;
} }
.btn{
.btn {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 11%; bottom: 11%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
z-index: 2; z-index: 2;
width: 280rpx; width: 280rpx;
height: 60rpx; height: 60rpx;
} }
</style> </style>

142
xxdf/chapter1/detail1.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
@ -28,95 +29,82 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
<MusicControl /> <MusicControl />
</view>
</template> </template>
<script setup> <script>
import { import MusicControl from '@/components/MusicControl.vue';
ref, export default {
reactive, components: {MusicControl},
onMounted, data() {
onUnmounted, return {
watch isVisible: false,
} from 'vue'; currentIndex: 0,
loadedPages: {
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
0: false, 0: false,
1: false 1: false
}); },
preloadBuffer: 1
// 加载预缓冲区大小
const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了
// 决定是否应该显示特定页面的内容
const shouldShowContent = (index) => {
// 显示当前页和前后各preloadBuffer页
return Math.abs(index - currentIndex.value) <= preloadBuffer;
};
// 监听currentIndex变化，更新已加载页面状态
watch(currentIndex, (newIndex) => {
// 标记当前页面和前后buffer页为已加载
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
loadedPages[i] = true;
}
// 更新动画状态
isVisible.value = newIndex === 1;
}, {
immediate: true
});
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
}; };
},
const goback = () => { methods: {
shouldShowContent(index) {
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
},
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
},
goback() {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}); });
};
onMounted(() => {
// 初始化时标记第一页和相邻页为已加载
loadedPages[0] = true;
// 由于只有两页且预加载缓冲区为1，所以第二页也会被标记为已加载
if (preloadBuffer >= 1) {
loadedPages[1] = true;
} }
}); },
watch: {
currentIndex: {
handler(newIndex) {
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
this.loadedPages[i] = true;
}
this.isVisible = newIndex === 1;
},
immediate: true
}
},
mounted() {
this.loadedPages[0] = true;
if (this.preloadBuffer >= 1) {
this.loadedPages[1] = true;
}
}
};
</script> </script>
<style scoped> <style scoped>
.main-swiper { .main-swiper {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
.page-container { .page-container {
height: 100vh; height: 100vh;
} }
.home-page { .home-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.bg-image { .bg-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
left: 0; left: 0;
top: 18%; top: 18%;
@ -130,21 +118,20 @@
transition: opacity 0.6s ease-out 0.2s, transition: opacity 0.6s ease-out 0.2s,
transform 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s,
filter 0.6s ease-out 0.2s; filter 0.6s ease-out 0.2s;
} }
.animate-visible { .animate-visible {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
filter: blur(0px); filter: blur(0px);
} }
.feel2-img {
.feel2-img {
width: 89%; width: 89%;
height: 248rpx; height: 248rpx;
} }
.arrow-content { .arrow-content {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
@ -154,15 +141,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
} }
.arrow-down { .arrow-down {
width: 200rpx; width: 200rpx;
height: 40rpx; height: 40rpx;
animation: bounce 1.5s infinite; animation: bounce 1.5s infinite;
} }
.btn { .btn {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 12%; bottom: 12%;
@ -170,10 +157,9 @@
z-index: 2; z-index: 2;
width: 180rpx; width: 180rpx;
height: 56rpx; height: 56rpx;
} }
@keyframes bounce {
@keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -181,13 +167,11 @@
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
40% { 40% {
transform: translateY(-20rpx); transform: translateY(-20rpx);
} }
60% { 60% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }
} }
</style> </style>

140
xxdf/chapter1/detail2.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
@ -28,95 +29,80 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
<MusicControl /> <MusicControl />
</view>
</template> </template>
<script setup> <script>
import { export default {
ref, data() {
reactive, return {
onMounted, isVisible: false,
onUnmounted, currentIndex: 0,
watch loadedPages: {
} from 'vue';
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
0: false, 0: false,
1: false 1: false
}); },
preloadBuffer: 1
// 加载预缓冲区大小
const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了
// 决定是否应该显示特定页面的内容
const shouldShowContent = (index) => {
// 显示当前页和前后各preloadBuffer页
return Math.abs(index - currentIndex.value) <= preloadBuffer;
};
// 监听currentIndex变化，更新已加载页面状态
watch(currentIndex, (newIndex) => {
// 标记当前页面和前后buffer页为已加载
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
loadedPages[i] = true;
}
// 更新动画状态
isVisible.value = newIndex === 1;
}, {
immediate: true
});
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
}; };
},
const goback = () => { methods: {
shouldShowContent(index) {
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
},
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
},
goback() {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}); });
};
onMounted(() => {
// 初始化时标记第一页和相邻页为已加载
loadedPages[0] = true;
// 由于只有两页且预加载缓冲区为1，所以第二页也会被标记为已加载
if (preloadBuffer >= 1) {
loadedPages[1] = true;
} }
}); },
watch: {
currentIndex: {
handler(newIndex) {
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
this.loadedPages[i] = true;
}
this.isVisible = newIndex === 1;
},
immediate: true
}
},
mounted() {
this.loadedPages[0] = true;
if (this.preloadBuffer >= 1) {
this.loadedPages[1] = true;
}
}
};
</script> </script>
<style scoped> <style scoped>
.main-swiper { .main-swiper {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
.page-container { .page-container {
height: 100vh; height: 100vh;
} }
.home-page { .home-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.bg-image { .bg-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
left: 0; left: 0;
top: 16%; top: 16%;
@ -130,21 +116,20 @@
transition: opacity 0.6s ease-out 0.2s, transition: opacity 0.6s ease-out 0.2s,
transform 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s,
filter 0.6s ease-out 0.2s; filter 0.6s ease-out 0.2s;
} }
.animate-visible { .animate-visible {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
filter: blur(0px); filter: blur(0px);
} }
.feel2-img {
.feel2-img {
width: 89%; width: 89%;
height: 248rpx; height: 248rpx;
} }
.arrow-content { .arrow-content {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
@ -154,15 +139,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
} }
.arrow-down { .arrow-down {
width: 200rpx; width: 200rpx;
height: 40rpx; height: 40rpx;
animation: bounce 1.5s infinite; animation: bounce 1.5s infinite;
} }
.btn { .btn {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 12%; bottom: 12%;
@ -170,10 +155,9 @@
z-index: 2; z-index: 2;
width: 180rpx; width: 180rpx;
height: 56rpx; height: 56rpx;
} }
@keyframes bounce {
@keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -181,13 +165,11 @@
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
40% { 40% {
transform: translateY(-20rpx); transform: translateY(-20rpx);
} }
60% { 60% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }
} }
</style> </style>

143
xxdf/chapter1/detail3.vue
View File

@ -1,4 +1,7 @@
<template> <template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
@ -24,94 +27,80 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
<MusicControl /> <MusicControl />
</view>
</template> </template>
<script setup> <script>
import { export default {
ref, data() {
reactive, return {
onMounted, isVisible: false,
onUnmounted, currentIndex: 0,
watch loadedPages: {
} from 'vue';
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
0: false, 0: false,
1: false 1: false
}); },
preloadBuffer: 1
// 加载预缓冲区大小 };
const preloadBuffer = 1; },
methods: {
// 决定是否应该显示特定页面的内容 shouldShowContent(index) {
const shouldShowContent = (index) => { return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
// 显示当前页和前后各preloadBuffer页 },
return Math.abs(index - currentIndex.value) <= preloadBuffer; handleSwiperChange(e) {
}; this.currentIndex = e.detail.current;
},
// 监听currentIndex变化，更新已加载页面状态 goback() {
watch(currentIndex, (newIndex) => {
// 标记当前页面和前后buffer页为已加载
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
loadedPages[i] = true;
}
// 更新动画状态
isVisible.value = newIndex === 1;
}, { immediate: true });
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
};
const goback = () => {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}); });
};
onMounted(() => {
// 初始化时标记第一页和相邻页为已加载
loadedPages[0] = true;
// 由于只有两页且预加载缓冲区为1，第二页也会被标记为已加载
if(preloadBuffer >= 1) {
loadedPages[1] = true;
} }
}); },
watch: {
currentIndex: {
handler(newIndex) {
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
this.loadedPages[i] = true;
}
this.isVisible = newIndex === 1;
},
immediate: true
}
},
mounted() {
this.loadedPages[0] = true;
if (this.preloadBuffer >= 1) {
this.loadedPages[1] = true;
}
}
};
</script> </script>
<style scoped> <style scoped>
.main-swiper { .main-swiper {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
.page-container { .page-container {
height: 100vh; height: 100vh;
} }
.home-page { .home-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.bg-image { .bg-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
left: 0; left: 0;
top: 16%; top: 16%;
@ -125,21 +114,20 @@ onMounted(() => {
transition: opacity 0.6s ease-out 0.2s, transition: opacity 0.6s ease-out 0.2s,
transform 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s,
filter 0.6s ease-out 0.2s; filter 0.6s ease-out 0.2s;
} }
.animate-visible { .animate-visible {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
filter: blur(0px); filter: blur(0px);
} }
.feel2-img {
.feel2-img {
width: 89%; width: 89%;
height: 228rpx; height: 228rpx;
} }
.arrow-content { .arrow-content {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
@ -149,15 +137,15 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
} }
.arrow-down { .arrow-down {
width: 200rpx; width: 200rpx;
height: 40rpx; height: 40rpx;
animation: bounce 1.5s infinite; animation: bounce 1.5s infinite;
} }
.btn { .btn {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 12%; bottom: 12%;
@ -165,10 +153,9 @@ onMounted(() => {
z-index: 2; z-index: 2;
width: 180rpx; width: 180rpx;
height: 56rpx; height: 56rpx;
} }
@keyframes bounce {
@keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -176,13 +163,11 @@ onMounted(() => {
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
40% { 40% {
transform: translateY(-20rpx); transform: translateY(-20rpx);
} }
60% { 60% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }
} }
</style> </style>

162
xxdf/chapter1/detail4.vue
View File

@ -1,4 +1,7 @@
<template> <template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
@ -44,99 +47,86 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
<MusicControl /> <MusicControl />
</view>
</template> </template>
<script setup> <script>
import { export default {
ref, data() {
reactive, return {
onMounted, isVisible: false,
onUnmounted, isVisible2: false,
watch currentIndex: 0,
} from 'vue'; loadedPages: {
const isVisible = ref(false);
const isVisible2 = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
0: false, 0: false,
1: false, 1: false,
2: false, 2: false,
3: false 3: false
}); },
preloadBuffer: 1
// 加载预缓冲区大小 };
const preloadBuffer = 1; },
methods: {
// 决定是否应该显示特定页面的内容 shouldShowContent(index) {
const shouldShowContent = (index) => { return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
// 显示当前页和前后各preloadBuffer页 },
return Math.abs(index - currentIndex.value) <= preloadBuffer; handleSwiperChange(e) {
}; this.currentIndex = e.detail.current;
},
// 监听currentIndex变化，更新已加载页面状态 goback() {
watch(currentIndex, (newIndex) => {
// 标记当前页面和前后buffer页为已加载
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) {
loadedPages[i] = true;
}
// 更新动画状态
isVisible.value = newIndex === 1;
isVisible2.value = newIndex === 2;
}, { immediate: true });
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
};
const goback = () => {
const app = getApp(); const app = getApp();
app.globalData.mainSliderIndex = 3; app.globalData.mainSliderIndex = 3;
uni.navigateTo({ uni.navigateTo({
url: '/pages/home/home' url: '/xxdf/home/home'
}); });
};
onMounted(() => {
// 初始化时标记第一页和相邻页为已加载
loadedPages[0] = true;
// 预加载第二页
if(preloadBuffer >= 1) {
loadedPages[1] = true;
} }
}); },
watch: {
currentIndex: {
handler(newIndex) {
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(3, newIndex + this.preloadBuffer); i++) {
this.loadedPages[i] = true;
}
this.isVisible = newIndex === 1;
this.isVisible2 = newIndex === 2;
},
immediate: true
}
},
mounted() {
this.loadedPages[0] = true;
if (this.preloadBuffer >= 1) {
this.loadedPages[1] = true;
}
}
};
</script> </script>
<style scoped> <style scoped>
.main-swiper { .main-swiper {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
.page-container { .page-container {
height: 100vh; height: 100vh;
} }
.home-page { .home-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.bg-image { .bg-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
.animate-content2 { .animate-content2 {
position: absolute; position: absolute;
left: 0; left: 0;
top: 25%; top: 25%;
@ -150,9 +140,9 @@ onMounted(() => {
transition: opacity 0.6s ease-out 0.2s, transition: opacity 0.6s ease-out 0.2s,
transform 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s,
filter 0.6s ease-out 0.2s; filter 0.6s ease-out 0.2s;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
left: 6%; left: 6%;
top: 32%; top: 32%;
@ -167,30 +157,31 @@ onMounted(() => {
transition: opacity 0.7s ease-out 0.3s, transition: opacity 0.7s ease-out 0.3s,
transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s,
filter 0.6s ease-out 0.3s; filter 0.6s ease-out 0.3s;
} }
.animate-visible { .animate-visible {
opacity: 1; opacity: 1;
transform: translateX(0) scale(1); transform: translateX(0) scale(1);
filter: blur(0); filter: blur(0);
} }
.feel2-img { .feel2-img {
width: 300rpx; width: 300rpx;
} }
.feel3-img { .feel3-img {
width: 100%; width: 100%;
height: 650rpx; height: 650rpx;
z-index: 2; z-index: 2;
position: relative position: relative
} }
.feel4-img{
.feel4-img {
width: 100%; width: 100%;
height: 400rpx; height: 400rpx;
} }
.arrow-content {
.arrow-content {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
@ -200,15 +191,15 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
} }
.arrow-down { .arrow-down {
width: 200rpx; width: 200rpx;
height: 40rpx; height: 40rpx;
animation: bounce 1.5s infinite; animation: bounce 1.5s infinite;
} }
.btn { .btn {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 12%; bottom: 12%;
@ -216,10 +207,9 @@ onMounted(() => {
z-index: 2; z-index: 2;
width: 270rpx; width: 270rpx;
height: 60rpx; height: 60rpx;
} }
@keyframes bounce {
@keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -227,13 +217,11 @@ onMounted(() => {
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
40% { 40% {
transform: translateY(-20rpx); transform: translateY(-20rpx);
} }
60% { 60% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }
} }
</style> </style>

143
xxdf/chapter1/detail5.vue
View File

@ -1,4 +1,7 @@
<template> <template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
@ -24,94 +27,80 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
<MusicControl /> <MusicControl />
</view>
</template> </template>
<script setup> <script>
import { export default {
ref, data() {
reactive, return {
onMounted, isVisible: false,
onUnmounted, currentIndex: 0,
watch loadedPages: {
} from 'vue';
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
0: false, 0: false,
1: false 1: false
}); },
preloadBuffer: 1
// 加载预缓冲区大小 };
const preloadBuffer = 1; },
methods: {
// 决定是否应该显示特定页面的内容 shouldShowContent(index) {
const shouldShowContent = (index) => { return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
// 显示当前页和前后各preloadBuffer页 },
return Math.abs(index - currentIndex.value) <= preloadBuffer; handleSwiperChange(e) {
}; this.currentIndex = e.detail.current;
},
// 监听currentIndex变化，更新已加载页面状态 goback() {
watch(currentIndex, (newIndex) => {
// 标记当前页面和前后buffer页为已加载
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
loadedPages[i] = true;
}
// 更新动画状态
isVisible.value = newIndex === 1;
}, { immediate: true });
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
};
const goback = () => {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}); });
};
onMounted(() => {
// 初始化时标记第一页和相邻页为已加载
loadedPages[0] = true;
// 由于只有两页且预加载缓冲区为1，第二页也会被标记为已加载
if(preloadBuffer >= 1) {
loadedPages[1] = true;
} }
}); },
watch: {
currentIndex: {
handler(newIndex) {
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
this.loadedPages[i] = true;
}
this.isVisible = newIndex === 1;
},
immediate: true
}
},
mounted() {
this.loadedPages[0] = true;
if (this.preloadBuffer >= 1) {
this.loadedPages[1] = true;
}
}
};
</script> </script>
<style scoped> <style scoped>
.main-swiper { .main-swiper {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
.page-container { .page-container {
height: 100vh; height: 100vh;
} }
.home-page { .home-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.bg-image { .bg-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
right: 6%; right: 6%;
top: 24%; top: 24%;
@ -124,21 +113,20 @@ onMounted(() => {
transition: opacity 0.6s ease-out 0.2s, transition: opacity 0.6s ease-out 0.2s,
transform 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s,
filter 0.6s ease-out 0.2s; filter 0.6s ease-out 0.2s;
} }
.animate-visible { .animate-visible {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
filter: blur(0px); filter: blur(0px);
} }
.feel2-img {
.feel2-img {
width: 310rpx; width: 310rpx;
height: 410rpx; height: 410rpx;
} }
.arrow-content { .arrow-content {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
@ -148,15 +136,15 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
} }
.arrow-down { .arrow-down {
width: 200rpx; width: 200rpx;
height: 40rpx; height: 40rpx;
animation: bounce 1.5s infinite; animation: bounce 1.5s infinite;
} }
.btn { .btn {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 12%; bottom: 12%;
@ -164,10 +152,9 @@ onMounted(() => {
z-index: 2; z-index: 2;
width: 180rpx; width: 180rpx;
height: 56rpx; height: 56rpx;
} }
@keyframes bounce {
@keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -175,13 +162,11 @@ onMounted(() => {
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
40% { 40% {
transform: translateY(-20rpx); transform: translateY(-20rpx);
} }
60% { 60% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }
} }
</style> </style>

10
xxdf/home/home.vue
View File

@ -154,22 +154,22 @@ export default {
}, },
navigateToChapter1() { navigateToChapter1() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/chapter1/cover1' url: '/xxdf/chapter1/cover1'
}); });
}, },
navigateToChapter2() { navigateToChapter2() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/chapter2/cover' url: '/xxdf/chapter2/cover'
}); });
}, },
navigateToChapter3() { navigateToChapter3() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/chapter3/cover' url: '/xxdf/chapter3/cover'
}); });
}, },
navigateToChapter4() { navigateToChapter4() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/chapter4/cover' url: '/xxdf/chapter4/cover'
}); });
} }
}, },
@ -205,7 +205,7 @@ export default {
return { return {
title: '细嗅东方｜「Epic Soul」阅读体 issue02', title: '细嗅东方｜「Epic Soul」阅读体 issue02',
mpId: 'wx8954209bb3ad489e', mpId: 'wx8954209bb3ad489e',
path: '/pages/chapter4/cover', path: '/xxdf/chapter4/cover',
imageUrl: '/static/share-img.jpg' imageUrl: '/static/share-img.jpg'
}; };
}, },

Write Preview
Loading…
Cancel
Save