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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components/MusicControl.vue
  2. 4
      pages.json
  3. 60
      xxdf/chapter1/cover1.vue
  4. 98
      xxdf/chapter1/detail1.vue
  5. 96
      xxdf/chapter1/detail2.vue
  6. 97
      xxdf/chapter1/detail3.vue
  7. 104
      xxdf/chapter1/detail4.vue
  8. 97
      xxdf/chapter1/detail5.vue
  9. 10
      xxdf/home/home.vue

1
components/MusicControl.vue
View File

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

4
pages.json
View File

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

60
xxdf/chapter1/cover1.vue
View File

@ -1,4 +1,5 @@
<template>
<view>
<view class="chapter-cover">
<image class="cover-img" src="/static/images/chapter1/cover2.png" mode=""></image>
<view class="five-senses-content" @click="goFeel">
@ -34,39 +35,44 @@
<image @click="goback" class="btn" src="/static/images/chapter1/abandon-btn.png" mode=""></image>
</view>
<MusicControl />
</view>
</template>
<script setup>
const goback = ()=>{
<script>
export default {
methods: {
goback() {
uni.navigateBack({
delta: 1
})
}
const goFeel = ()=>{
});
},
goFeel() {
uni.navigateTo({
url:'/pages/chapter1/detail1'
})
}
const goVision = ()=>{
url: '/xxdf/chapter1/detail1'
});
},
goVision() {
uni.navigateTo({
url:'/pages/chapter1/detail2'
})
}
const goHearing = ()=>{
url: '/xxdf/chapter1/detail2'
});
},
goHearing() {
uni.navigateTo({
url:'/pages/chapter1/detail3'
})
}
const goOlfactory = ()=>{
url: '/xxdf/chapter1/detail3'
});
},
goOlfactory() {
uni.navigateTo({
url:'/pages/chapter1/detail4'
})
}
const goGustation = ()=>{
url: '/xxdf/chapter1/detail4'
});
},
goGustation() {
uni.navigateTo({
url:'/pages/chapter1/detail5'
})
url: '/xxdf/chapter1/detail5'
});
}
}
};
</script>
<style scoped>
@ -84,6 +90,7 @@ const goGustation = ()=>{
height: 100%;
z-index: 1;
}
.five-senses-content {
position: absolute;
top: 32%;
@ -93,22 +100,27 @@ const goGustation = ()=>{
flex-direction: column;
align-items: center;
}
.vision {
top: 54% !important;
right: 47% !important;
}
.hearing {
top: 62% !important;
right: 8% !important;
}
.olfactory {
top: 64% !important;
right: 76% !important;
}
.gustation {
top: 73% !important;
right: 86% !important;
}
.box1 {
background: #fff;
border-radius: 50%;
@ -116,11 +128,13 @@ const goGustation = ()=>{
width: 40rpx;
height: 40rpx;
}
.senses-txt {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
margin-top: 20rpx;
}
.btn {
position: absolute;
left: 50%;

98
xxdf/chapter1/detail1.vue
View File

@ -1,4 +1,5 @@
<template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item>
<view class="page-container home-page">
@ -28,69 +29,57 @@
</swiper-item>
</swiper>
<MusicControl />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUnmounted,
watch
} from 'vue';
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
<script>
import MusicControl from '@/components/MusicControl.vue';
export default {
components: {MusicControl},
data() {
return {
isVisible: false,
currentIndex: 0,
loadedPages: {
0: false,
1: false
});
// 加载预缓冲区大小
const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了
// 决定是否应该显示特定页面的内容
const shouldShowContent = (index) => {
// 显示当前页和前后各preloadBuffer页
return Math.abs(index - currentIndex.value) <= preloadBuffer;
},
preloadBuffer: 1
};
// 监听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({
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>
<style scoped>
.main-swiper {
width: 100%;
@ -115,7 +104,6 @@
z-index: 1;
}
.animate-content {
position: absolute;
left: 0;
@ -138,7 +126,6 @@
filter: blur(0px);
}
.feel2-img {
width: 89%;
height: 248rpx;
@ -173,7 +160,6 @@
}
@keyframes bounce {
0%,
20%,
50%,
@ -181,11 +167,9 @@
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20rpx);
}
60% {
transform: translateY(-10rpx);
}

96
xxdf/chapter1/detail2.vue
View File

@ -1,4 +1,5 @@
<template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item>
<view class="page-container home-page">
@ -28,69 +29,55 @@
</swiper-item>
</swiper>
<MusicControl />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUnmounted,
watch
} from 'vue';
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
<script>
export default {
data() {
return {
isVisible: false,
currentIndex: 0,
loadedPages: {
0: false,
1: false
});
// 加载预缓冲区大小
const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了
// 决定是否应该显示特定页面的内容
const shouldShowContent = (index) => {
// 显示当前页和前后各preloadBuffer页
return Math.abs(index - currentIndex.value) <= preloadBuffer;
},
preloadBuffer: 1
};
// 监听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({
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>
<style scoped>
.main-swiper {
width: 100%;
@ -115,7 +102,6 @@
z-index: 1;
}
.animate-content {
position: absolute;
left: 0;
@ -138,7 +124,6 @@
filter: blur(0px);
}
.feel2-img {
width: 89%;
height: 248rpx;
@ -173,7 +158,6 @@
}
@keyframes bounce {
0%,
20%,
50%,
@ -181,11 +165,9 @@
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20rpx);
}
60% {
transform: translateY(-10rpx);
}

97
xxdf/chapter1/detail3.vue
View File

@ -1,4 +1,7 @@
<template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item>
<view class="page-container home-page">
@ -24,68 +27,55 @@
</swiper-item>
</swiper>
<MusicControl />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUnmounted,
watch
} from 'vue';
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
<script>
export default {
data() {
return {
isVisible: false,
currentIndex: 0,
loadedPages: {
0: false,
1: false
});
// 加载预缓冲区大小
const preloadBuffer = 1;
// 决定是否应该显示特定页面的内容
const shouldShowContent = (index) => {
// 显示当前页和前后各preloadBuffer页
return Math.abs(index - currentIndex.value) <= preloadBuffer;
},
preloadBuffer: 1
};
// 监听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({
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>
<style scoped>
.main-swiper {
width: 100%;
@ -110,7 +100,6 @@ onMounted(() => {
z-index: 1;
}
.animate-content {
position: absolute;
left: 0;
@ -133,7 +122,6 @@ onMounted(() => {
filter: blur(0px);
}
.feel2-img {
width: 89%;
height: 228rpx;
@ -168,7 +156,6 @@ onMounted(() => {
}
@keyframes bounce {
0%,
20%,
50%,
@ -176,11 +163,9 @@ onMounted(() => {
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20rpx);
}
60% {
transform: translateY(-10rpx);
}

104
xxdf/chapter1/detail4.vue
View File

@ -1,4 +1,7 @@
<template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item>
<view class="page-container home-page">
@ -44,74 +47,61 @@
</swiper-item>
</swiper>
<MusicControl />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUnmounted,
watch
} from 'vue';
const isVisible = ref(false);
const isVisible2 = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
<script>
export default {
data() {
return {
isVisible: false,
isVisible2: false,
currentIndex: 0,
loadedPages: {
0: false,
1: false,
2: false,
3: false
});
// 加载预缓冲区大小
const preloadBuffer = 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(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;
},
preloadBuffer: 1
};
const goback = () => {
},
methods: {
shouldShowContent(index) {
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
},
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
},
goback() {
const app = getApp();
app.globalData.mainSliderIndex = 3;
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>
<style scoped>
.main-swiper {
width: 100%;
@ -175,7 +165,6 @@ onMounted(() => {
filter: blur(0);
}
.feel2-img {
width: 300rpx;
}
@ -186,10 +175,12 @@ onMounted(() => {
z-index: 2;
position: relative
}
.feel4-img {
width: 100%;
height: 400rpx;
}
.arrow-content {
width: 100%;
position: absolute;
@ -219,7 +210,6 @@ onMounted(() => {
}
@keyframes bounce {
0%,
20%,
50%,
@ -227,11 +217,9 @@ onMounted(() => {
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20rpx);
}
60% {
transform: translateY(-10rpx);
}

97
xxdf/chapter1/detail5.vue
View File

@ -1,4 +1,7 @@
<template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item>
<view class="page-container home-page">
@ -24,68 +27,55 @@
</swiper-item>
</swiper>
<MusicControl />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUnmounted,
watch
} from 'vue';
const isVisible = ref(false);
const currentIndex = ref(0);
// 记录哪些页面已经加载过
const loadedPages = reactive({
<script>
export default {
data() {
return {
isVisible: false,
currentIndex: 0,
loadedPages: {
0: false,
1: false
});
// 加载预缓冲区大小
const preloadBuffer = 1;
// 决定是否应该显示特定页面的内容
const shouldShowContent = (index) => {
// 显示当前页和前后各preloadBuffer页
return Math.abs(index - currentIndex.value) <= preloadBuffer;
},
preloadBuffer: 1
};
// 监听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({
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>
<style scoped>
.main-swiper {
width: 100%;
@ -110,7 +100,6 @@ onMounted(() => {
z-index: 1;
}
.animate-content {
position: absolute;
right: 6%;
@ -132,7 +121,6 @@ onMounted(() => {
filter: blur(0px);
}
.feel2-img {
width: 310rpx;
height: 410rpx;
@ -167,7 +155,6 @@ onMounted(() => {
}
@keyframes bounce {
0%,
20%,
50%,
@ -175,11 +162,9 @@ onMounted(() => {
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20rpx);
}
60% {
transform: translateY(-10rpx);
}

10
xxdf/home/home.vue
View File

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

Write Preview
Loading…
Cancel
Save