jiazhipeng 4 months ago
parent
commit
0f3f792c8d
  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

@ -15,6 +15,7 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('初始化')
// //
this.syncMusicState(); this.syncMusicState();

4
pages.json

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

60
xxdf/chapter1/cover1.vue

@ -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,39 +35,44 @@
<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>
@ -84,6 +90,7 @@ const goGustation = ()=>{
height: 100%; height: 100%;
z-index: 1; z-index: 1;
} }
.five-senses-content { .five-senses-content {
position: absolute; position: absolute;
top: 32%; top: 32%;
@ -93,22 +100,27 @@ const goGustation = ()=>{
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%;
@ -116,11 +128,13 @@ const goGustation = ()=>{
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%;

98
xxdf/chapter1/detail1.vue

@ -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,69 +29,57 @@
</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 methods: {
watch(currentIndex, (newIndex) => { shouldShowContent(index) {
// buffer return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { },
loadedPages[i] = true; handleSwiperChange(e) {
} this.currentIndex = e.detail.current;
},
// goback() {
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%;
@ -115,7 +104,6 @@
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
left: 0; left: 0;
@ -138,7 +126,6 @@
filter: blur(0px); filter: blur(0px);
} }
.feel2-img { .feel2-img {
width: 89%; width: 89%;
height: 248rpx; height: 248rpx;
@ -173,7 +160,6 @@
} }
@keyframes bounce { @keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -181,11 +167,9 @@
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
40% { 40% {
transform: translateY(-20rpx); transform: translateY(-20rpx);
} }
60% { 60% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }

96
xxdf/chapter1/detail2.vue

@ -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,69 +29,55 @@
</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 methods: {
watch(currentIndex, (newIndex) => { shouldShowContent(index) {
// buffer return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { },
loadedPages[i] = true; handleSwiperChange(e) {
} this.currentIndex = e.detail.current;
},
// goback() {
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%;
@ -115,7 +102,6 @@
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
left: 0; left: 0;
@ -138,7 +124,6 @@
filter: blur(0px); filter: blur(0px);
} }
.feel2-img { .feel2-img {
width: 89%; width: 89%;
height: 248rpx; height: 248rpx;
@ -173,7 +158,6 @@
} }
@keyframes bounce { @keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -181,11 +165,9 @@
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
40% { 40% {
transform: translateY(-20rpx); transform: translateY(-20rpx);
} }
60% { 60% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }

97
xxdf/chapter1/detail3.vue

@ -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,68 +27,55 @@
</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;
//
const shouldShowContent = (index) => {
// preloadBuffer
return Math.abs(index - currentIndex.value) <= preloadBuffer;
}; };
},
// currentIndex methods: {
watch(currentIndex, (newIndex) => { shouldShowContent(index) {
// buffer return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { },
loadedPages[i] = true; handleSwiperChange(e) {
} this.currentIndex = e.detail.current;
},
// goback() {
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%;
@ -110,7 +100,6 @@ onMounted(() => {
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
left: 0; left: 0;
@ -133,7 +122,6 @@ onMounted(() => {
filter: blur(0px); filter: blur(0px);
} }
.feel2-img { .feel2-img {
width: 89%; width: 89%;
height: 228rpx; height: 228rpx;
@ -168,7 +156,6 @@ onMounted(() => {
} }
@keyframes bounce { @keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -176,11 +163,9 @@ 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);
} }

104
xxdf/chapter1/detail4.vue

@ -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,74 +47,61 @@
</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;
//
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;
}; };
},
const goback = () => { methods: {
shouldShowContent(index) {
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
},
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
},
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%;
@ -175,7 +165,6 @@ onMounted(() => {
filter: blur(0); filter: blur(0);
} }
.feel2-img { .feel2-img {
width: 300rpx; width: 300rpx;
} }
@ -186,10 +175,12 @@ onMounted(() => {
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;
@ -219,7 +210,6 @@ onMounted(() => {
} }
@keyframes bounce { @keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -227,11 +217,9 @@ 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);
} }

97
xxdf/chapter1/detail5.vue

@ -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,68 +27,55 @@
</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;
//
const shouldShowContent = (index) => {
// preloadBuffer
return Math.abs(index - currentIndex.value) <= preloadBuffer;
}; };
},
// currentIndex methods: {
watch(currentIndex, (newIndex) => { shouldShowContent(index) {
// buffer return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { },
loadedPages[i] = true; handleSwiperChange(e) {
} this.currentIndex = e.detail.current;
},
// goback() {
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%;
@ -110,7 +100,6 @@ onMounted(() => {
z-index: 1; z-index: 1;
} }
.animate-content { .animate-content {
position: absolute; position: absolute;
right: 6%; right: 6%;
@ -132,7 +121,6 @@ onMounted(() => {
filter: blur(0px); filter: blur(0px);
} }
.feel2-img { .feel2-img {
width: 310rpx; width: 310rpx;
height: 410rpx; height: 410rpx;
@ -167,7 +155,6 @@ onMounted(() => {
} }
@keyframes bounce { @keyframes bounce {
0%, 0%,
20%, 20%,
50%, 50%,
@ -175,11 +162,9 @@ 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);
} }

10
xxdf/home/home.vue

@ -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'
}; };
}, },

Loading…
Cancel
Save