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

1

dev_xrcc
jiazhipeng 4 months ago
parent
0f3f792c8d
commit
90a5452779
3 changed files with 458 additions and 457 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. 163
      xxdf/chapter2/cover.vue
  2. 174
      xxdf/chapter3/cover.vue
  3. 60
      xxdf/chapter3/randomImage.vue

163
xxdf/chapter2/cover.vue
View File

@ -1,4 +1,7 @@
<template>
<view>
<swiper class="main-swiper" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<!-- 主swiper的第一个item -->
<swiper-item>
@ -64,132 +67,130 @@
</swiper-item>
</swiper>
<MusicControl />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
watch
} from 'vue';
const currentIndex = ref(0);
const verticalIndex = ref(0);
// 记录主swiper哪些页面已经加载过
const loadedPages = reactive({
<script>
export default {
data() {
return {
currentIndex: 0,
verticalIndex: 0,
// 记录主swiper哪些页面已经加载过
loadedPages: {
0: false,
1: false,
2: false,
3: false
});
// 记录嵌套swiper哪些页面已经加载过
const loadedNestedPages = reactive({
},
// 记录嵌套swiper哪些页面已经加载过
loadedNestedPages: {
0: false,
1: false,
2: false
});
// 预加载缓冲区大小
const preloadBuffer = 1;
const nestedPreloadBuffer = 1;
// 决定是否应该显示主swiper特定页面的内容
const shouldShowContent = (index) => {
return Math.abs(index - currentIndex.value) <= preloadBuffer;
};
// 决定是否应该显示嵌套swiper特定页面的内容
const shouldShowNestedContent = (index) => {
return Math.abs(index - verticalIndex.value) <= nestedPreloadBuffer;
};
// 监听主swiper currentIndex变化，更新已加载页面状态
watch(currentIndex, (newIndex) => {
},
// 预加载缓冲区大小
preloadBuffer: 1,
nestedPreloadBuffer: 1
}
},
computed: {
// 决定是否应该显示主swiper特定页面的内容
shouldShowContent() {
return (index) => {
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
}
},
// 决定是否应该显示嵌套swiper特定页面的内容
shouldShowNestedContent() {
return (index) => {
return Math.abs(index - this.verticalIndex) <= this.nestedPreloadBuffer;
}
}
},
watch: {
// 监听主swiper currentIndex变化，更新已加载页面状态
currentIndex(newIndex) {
// 标记当前页面和前后buffer页为已加载
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) {
loadedPages[i] = true;
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(3, newIndex + this.preloadBuffer); i++) {
this.loadedPages[i] = true;
}
// 当切换到第4个item时，初始化嵌套swiper的加载状态
if (newIndex === 3) {
loadedNestedPages[0] = true;
if (nestedPreloadBuffer >= 1) {
loadedNestedPages[1] = true;
this.loadedNestedPages[0] = true;
if (this.nestedPreloadBuffer >= 1) {
this.loadedNestedPages[1] = true;
}
}
}, { immediate: true });
// 监听嵌套swiper verticalIndex变化，更新已加载页面状态
watch(verticalIndex, (newIndex) => {
},
// 监听嵌套swiper verticalIndex变化，更新已加载页面状态
verticalIndex(newIndex) {
// 只有当主swiper在第4个item时才更新嵌套swiper状态
if (currentIndex.value === 3) {
if (this.currentIndex === 3) {
// 标记当前页面和前后buffer页为已加载
for (let i = Math.max(0, newIndex - nestedPreloadBuffer); i <= Math.min(2, newIndex + nestedPreloadBuffer); i++) {
loadedNestedPages[i] = true;
for (let i = Math.max(0, newIndex - this.nestedPreloadBuffer); i <= Math.min(2, newIndex + this.nestedPreloadBuffer); i++) {
this.loadedNestedPages[i] = true;
}
}
}, { immediate: true });
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
};
const handleVerticalChange = (e) => {
verticalIndex.value = e.detail.current;
};
const goback = () => {
}
},
methods: {
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
},
handleVerticalChange(e) {
this.verticalIndex = e.detail.current;
},
goback() {
const app = getApp();
app.globalData.mainSliderIndex = 4;
uni.navigateTo({
url: '/pages/home/home'
url: '/xxdf/home/home'
});
};
onMounted(() => {
}
},
mounted() {
// 初始化主swiper，标记第一页和相邻页为已加载
currentIndex.value = 0;
for (let i = 0; i <= Math.min(preloadBuffer, 3); i++) {
loadedPages[i] = true;
this.currentIndex = 0;
for (let i = 0; i <= Math.min(this.preloadBuffer, 3); i++) {
this.loadedPages[i] = true;
}
// 初始化嵌套swiper的第一页为已加载（以防万一）
verticalIndex.value = 0;
loadedNestedPages[0] = true;
});
this.verticalIndex = 0;
this.loadedNestedPages[0] = true;
}
}
</script>
<style scoped>
.main-swiper {
.main-swiper {
width: 100%;
height: 100vh;
}
.nested-swiper {
}
.nested-swiper {
width: 100%;
height: 100vh;
}
.page-container {
}
.page-container {
height: 100vh;
}
}
.home-page {
.home-page {
position: relative;
overflow: hidden;
}
}
.bg-image {
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
}
.btn {
position: absolute;
left: 50%;
bottom: 12%;
@ -197,5 +198,5 @@ onMounted(() => {
z-index: 2;
width: 250rpx;
height: 60rpx;
}
}
</style>

174
xxdf/chapter3/cover.vue
View File

@ -1,16 +1,15 @@
<template>
<view>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex">
<swiper class="nested-swiper" :duration="300" @change="(e) => handleVerticalChange(e, outerIndex)"
:current="nestedIndices[outerIndex]">
<swiper class="nested-swiper" :duration="300" @change="handleVerticalChange" :current="nestedIndices[outerIndex]">
<!-- 嵌套swiper的第一个item（封面页） -->
<swiper-item>
<view class="page-container home-page">
<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}.png`" mode=""
:lazy-load="true"></image>
<image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}"
:src="`/static/images/chapter3/cover${outerIndex+2}-txt.png`" mode="" :lazy-load="true">
</image>
<image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '.png'" mode="" :lazy-load="true"></image>
<image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '-txt.png'" mode="" :lazy-load="true"></image>
<image class="btn" src="/static/seek2-btn.png" mode="" :lazy-load="true"></image>
</view>
</swiper-item>
@ -18,13 +17,10 @@
<swiper-item>
<view class="page-container home-page">
<view class="gif-container">
<image v-if="shouldLoadContent(outerIndex)" class="gif-style"
:src="`/static/3-${outerIndex+1}-2.gif`" mode="aspectFill" :lazy-load="true">
</image>
<image v-if="shouldLoadContent(outerIndex)" class="gif-style" :src="'/static/3-' + (outerIndex+1) + '-2.gif'" mode="aspectFill" :lazy-load="true"></image>
</view>
<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}-1.png`" mode=""
:lazy-load="true"></image>
<image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '-1.png'" mode="" :lazy-load="true"></image>
<view class="qrcode-content">
<image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image>
<view class="code-txt">
@ -38,28 +34,21 @@
<swiper-item>
<view class="page-container home-page">
<image class="bg-image" src="/static/images/chapter3/cover9.png" mode="" :lazy-load="true"></image>
<image @click="goRandomImage" class="cover-txt9" src="/static/images/chapter3/cover9-txt.png" mode=""
:lazy-load="true"></image>
<image @click="goRandomImage" class="cover-txt9" src="/static/images/chapter3/cover9-txt.png" mode="" :lazy-load="true"></image>
</view>
</swiper-item>
</swiper>
<MusicControl />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUnmounted,
watch,
computed
} from 'vue';
const currentIndex = ref(0);
<script>
export default {
data() {
return {
currentIndex: 0,
// 嵌套swiper索引
const nestedIndices = reactive({
nestedIndices: {
0: 0,
1: 0,
2: 0,
@ -67,10 +56,9 @@
4: 0,
5: 0,
6: 0
});
},
// 当前活跃的页面，用于内容加载判断
const activePages = reactive({
activePages: {
mainIndex: 0,
nestedIndices: {
0: 0,
@ -81,31 +69,28 @@
5: 0,
6: 0
}
});
},
// 预加载缓冲区大小
const preloadBuffer = 2;
const shouldLoadContent = (outerIndex) => {
// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
return Math.abs(outerIndex - currentIndex.value) <= preloadBuffer &&
(nestedIndices[outerIndex] === 1 || activePages.nestedIndices[outerIndex] === 1);
};
preloadBuffer: 2
}
},
methods: {
// 主swiper切换事件处理
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
activePages.mainIndex = e.detail.current;
};
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
this.activePages.mainIndex = e.detail.current;
},
// 嵌套swiper切换事件处理
const handleVerticalChange = (e, outerIndex) => {
nestedIndices[outerIndex] = e.detail.current;
activePages.nestedIndices[outerIndex] = e.detail.current;
};
handleVerticalChange(e) {
const outerIndex = parseInt(e.target.dataset.index);
this.nestedIndices[outerIndex] = e.detail.current;
this.activePages.nestedIndices[outerIndex] = e.detail.current;
},
const goRandomImage = () => {
const imageArray = [{
goRandomImage() {
const imageArray = [
{
id: 1,
image: '/static/images/chapter3/random/image1.png',
name: '雏菊',
@ -153,55 +138,68 @@
app.globalData.randomImages = imageArray;
uni.setStorageSync('randomImages', JSON.stringify(imageArray));
uni.navigateTo({
url: '/pages/chapter3/randomImage'
url: '/xxdf/chapter3/randomImage'
});
};
},
const goback = () => {
goback() {
const app = getApp();
app.globalData.mainSliderIndex = 4;
uni.redirectTo({
url: '/pages/home/home'
url: '/xxdf/home/home'
});
};
onMounted(() => {
}
},
computed: {
shouldLoadContent() {
return (outerIndex) => {
// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
return Math.abs(outerIndex - this.currentIndex) <= this.preloadBuffer &&
(this.nestedIndices[outerIndex] === 1 || this.activePages.nestedIndices[outerIndex] === 1);
}
}
},
mounted() {
// 初始化状态
currentIndex.value = 0;
activePages.mainIndex = 0;
});
this.currentIndex = 0;
this.activePages.mainIndex = 0;
},
beforeDestroy() {
// 组件销毁前的清理工作（如果有）
}
}
</script>
<style scoped>
.main-swiper {
.main-swiper {
width: 100%;
height: 100vh;
}
}
.nested-swiper {
.nested-swiper {
width: 100%;
height: 100vh;
}
}
.page-container {
.page-container {
height: 100vh;
}
}
.home-page {
.home-page {
position: relative;
overflow: hidden;
}
}
.bg-image {
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
}
.cover-txt {
.cover-txt {
position: absolute;
left: 50%;
bottom: 22%;
@ -209,14 +207,14 @@
z-index: 2;
width: 74%;
height: 122rpx;
}
}
.cover-txt2 {
.cover-txt2 {
width: 60% !important;
height: 134rpx !important;
}
}
.cover-txt9 {
.cover-txt9 {
position: absolute;
left: 50%;
bottom: 0;
@ -224,9 +222,9 @@
z-index: 2;
width: 360rpx;
height: 280rpx;
}
}
.btn {
.btn {
position: absolute;
left: 50%;
bottom: 16%;
@ -234,9 +232,9 @@
z-index: 2;
width: 244rpx;
height: 60rpx;
}
}
.qrcode-content {
.qrcode-content {
display: flex;
flex-direction: column;
align-items: center;
@ -245,20 +243,20 @@
bottom: 0;
transform: translate(-50%, -25%);
z-index: 2;
}
}
.qrCode {
.qrCode {
width: 200rpx;
height: 200rpx;
}
}
.code-txt {
.code-txt {
color: #333;
font-size: 24rpx;
margin-top: 10rpx;
}
}
.gif-container {
.gif-container {
background: #333333;
position: absolute;
top: 0;
@ -266,11 +264,11 @@
width: 100%;
height: 400rpx;
z-index: 2;
}
}
.gif-style {
.gif-style {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>

60
xxdf/chapter3/randomImage.vue
View File

@ -6,18 +6,19 @@
</view>
</template>
<script setup>
import {
ref,
onMounted,
nextTick
} from 'vue';
import RandomImage from '../../components/chapter3/RandomImage.vue';
<script>
import RandomImage from '../../components/chapter3/RandomImage.vue';
// 获取传递的图片数组
const randomImages = ref([]);
const randomImageRef = ref(null);
onMounted(() => {
export default {
components: {
RandomImage
},
data() {
return {
randomImages: []
}
},
mounted() {
// 尝试从本地存储获取
let storedImages = uni.getStorageSync('randomImages');
@ -26,13 +27,13 @@
if (storedImages) {
// 从本地存储恢复
randomImages.value = JSON.parse(storedImages);
this.randomImages = JSON.parse(storedImages);
} else if (app.globalData && app.globalData.randomImages) {
// 从全局数据获取
randomImages.value = app.globalData.randomImages;
this.randomImages = app.globalData.randomImages;
} else {
// 使用默认图片数组
randomImages.value = [
this.randomImages = [
'/static/images/chapter3/random/image1.png',
'/static/images/chapter3/random/image2.png',
'/static/images/chapter3/random/image3.png',
@ -43,42 +44,43 @@
];
}
// 等待组件挂载完成
nextTick(() => {
if (randomImageRef.value && randomImageRef.value.selectRandomImage) {
randomImageRef.value.selectRandomImage();
// 等待DOM更新完成
this.$nextTick(() => {
if (this.$refs.randomImageRef && this.$refs.randomImageRef.selectRandomImage) {
this.$refs.randomImageRef.selectRandomImage();
}
});
});
},
methods: {
// 返回第三章封面
const goBack = () => {
goBack() {
const app = getApp();
app.globalData.mainSliderIndex = 4; // 第三章封面的索引
uni.navigateTo({
url: '/pages/home/home'
url: '/xxdf/home/home'
})
}
}
}
</script>
<style scoped>
.random-image-container {
.random-image-container {
width: 100%;
height: 100vh;
position: relative;
}
}
.back-icon {
.back-icon {
width: 48rpx;
height: 48rpx;
position: absolute;
left: 40rpx;
top: 40rpx;
z-index: 10;
}
}
.save-icon {
.save-icon {
width: 340rpx;
height: 60rpx;
position: absolute;
@ -86,5 +88,5 @@
z-index: 10;
bottom: 14%;
transform: translate(-50%, -50%);
}
}
</style>
Write Preview
Loading…
Cancel
Save