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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 253
      xxdf/chapter2/cover.vue
  2. 506
      xxdf/chapter3/cover.vue
  3. 156
      xxdf/chapter3/randomImage.vue

253
xxdf/chapter2/cover.vue
View File

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

506
xxdf/chapter3/cover.vue
View File

@ -1,276 +1,274 @@
<template> <template>
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> <view>
<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="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
<!-- 嵌套swiper的第一个item（封面页） --> <swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex">
<swiper-item> <swiper class="nested-swiper" :duration="300" @change="handleVerticalChange" :current="nestedIndices[outerIndex]">
<view class="page-container home-page"> <!-- 嵌套swiper的第一个item（封面页） -->
<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}.png`" mode="" <swiper-item>
:lazy-load="true"></image> <view class="page-container home-page">
<image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}" <image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '.png'" mode="" :lazy-load="true"></image>
:src="`/static/images/chapter3/cover${outerIndex+2}-txt.png`" mode="" :lazy-load="true"> <image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '-txt.png'" mode="" :lazy-load="true"></image>
</image> <image class="btn" src="/static/seek2-btn.png" mode="" :lazy-load="true"></image>
<image class="btn" src="/static/seek2-btn.png" mode="" :lazy-load="true"></image> </view>
</view> </swiper-item>
</swiper-item> <!-- 嵌套swiper的第二个item-->
<!-- 嵌套swiper的第二个item--> <swiper-item>
<swiper-item> <view class="page-container home-page">
<view class="page-container home-page"> <view class="gif-container">
<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" </view>
: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="" <image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '-1.png'" mode="" :lazy-load="true"></image>
:lazy-load="true"></image> <view class="qrcode-content">
<view class="qrcode-content"> <image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image>
<image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image> <view class="code-txt">
<view class="code-txt"> 扫码下单
扫码下单 </view>
</view> </view>
</view> </view>
</view> </swiper-item>
</swiper-item> </swiper>
</swiper> </swiper-item>
</swiper-item> <swiper-item>
<swiper-item> <view class="page-container home-page">
<view class="page-container home-page"> <image class="bg-image" src="/static/images/chapter3/cover9.png" mode="" :lazy-load="true"></image>
<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="" </view>
:lazy-load="true"></image> </swiper-item>
</view> </swiper>
</swiper-item> <MusicControl />
</swiper> </view>
<MusicControl />
</template> </template>
<script setup> <script>
import { export default {
ref, data() {
reactive, return {
onMounted, currentIndex: 0,
onUnmounted, // 嵌套swiper索引
watch, nestedIndices: {
computed 0: 0,
} from 'vue'; 1: 0,
2: 0,
3: 0,
4: 0,
5: 0,
6: 0
},
// 当前活跃的页面，用于内容加载判断
activePages: {
mainIndex: 0,
nestedIndices: {
0: 0,
1: 0,
2: 0,
3: 0,
4: 0,
5: 0,
6: 0
}
},
// 预加载缓冲区大小
preloadBuffer: 2
}
},
methods: {
// 主swiper切换事件处理
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
this.activePages.mainIndex = e.detail.current;
},
// 嵌套swiper切换事件处理
handleVerticalChange(e) {
const outerIndex = parseInt(e.target.dataset.index);
this.nestedIndices[outerIndex] = e.detail.current;
this.activePages.nestedIndices[outerIndex] = e.detail.current;
},
goRandomImage() {
const imageArray = [
{
id: 1,
image: '/static/images/chapter3/random/image1.png',
name: '雏菊',
desc: '宋 丛菊图页'
},
{
id: 2,
image: '/static/images/chapter3/random/image2.png',
name: '杜鹃',
desc: '清 恽寿平 花卉十开 杜鹃'
},
{
id: 3,
image: '/static/images/chapter3/random/image3.png',
name: '金桂',
desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏'
},
{
id: 4,
image: '/static/images/chapter3/random/image4.png',
name: '绿梅',
desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏'
},
{
id: 5,
image: '/static/images/chapter3/random/image5.png',
name: '墨兰',
desc: '宋 秋兰绽蕊图'
},
{
id: 6,
image: '/static/images/chapter3/random/image6.png',
name: '茉莉',
desc: '宋 茉莉花图页'
},
{
id: 7,
image: '/static/images/chapter3/random/image7.png',
name: '青莲',
desc: '宋 出水芙蓉图页'
},
];
const currentIndex = ref(0); const app = getApp();
app.globalData.randomImages = imageArray;
// 嵌套swiper索引 uni.setStorageSync('randomImages', JSON.stringify(imageArray));
const nestedIndices = reactive({ uni.navigateTo({
0: 0, url: '/xxdf/chapter3/randomImage'
1: 0, });
2: 0, },
3: 0,
4: 0, goback() {
5: 0, const app = getApp();
6: 0 app.globalData.mainSliderIndex = 4;
}); uni.redirectTo({
url: '/xxdf/home/home'
// 当前活跃的页面，用于内容加载判断 });
const activePages = reactive({ }
mainIndex: 0, },
nestedIndices: { computed: {
0: 0, shouldLoadContent() {
1: 0, return (outerIndex) => {
2: 0, // 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
3: 0, return Math.abs(outerIndex - this.currentIndex) <= this.preloadBuffer &&
4: 0, (this.nestedIndices[outerIndex] === 1 || this.activePages.nestedIndices[outerIndex] === 1);
5: 0, }
6: 0 }
} },
}); mounted() {
// 初始化状态
// 预加载缓冲区大小 this.currentIndex = 0;
const preloadBuffer = 2; this.activePages.mainIndex = 0;
},
const shouldLoadContent = (outerIndex) => { beforeDestroy() {
// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载 // 组件销毁前的清理工作（如果有）
return Math.abs(outerIndex - currentIndex.value) <= preloadBuffer && }
(nestedIndices[outerIndex] === 1 || activePages.nestedIndices[outerIndex] === 1); }
};
// 主swiper切换事件处理
const handleSwiperChange = (e) => {
currentIndex.value = e.detail.current;
activePages.mainIndex = e.detail.current;
};
// 嵌套swiper切换事件处理
const handleVerticalChange = (e, outerIndex) => {
nestedIndices[outerIndex] = e.detail.current;
activePages.nestedIndices[outerIndex] = e.detail.current;
};
const goRandomImage = () => {
const imageArray = [{
id: 1,
image: '/static/images/chapter3/random/image1.png',
name: '雏菊',
desc: '宋 丛菊图页'
},
{
id: 2,
image: '/static/images/chapter3/random/image2.png',
name: '杜鹃',
desc: '清 恽寿平 花卉十开 杜鹃'
},
{
id: 3,
image: '/static/images/chapter3/random/image3.png',
name: '金桂',
desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏'
},
{
id: 4,
image: '/static/images/chapter3/random/image4.png',
name: '绿梅',
desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏'
},
{
id: 5,
image: '/static/images/chapter3/random/image5.png',
name: '墨兰',
desc: '宋 秋兰绽蕊图'
},
{
id: 6,
image: '/static/images/chapter3/random/image6.png',
name: '茉莉',
desc: '宋 茉莉花图页'
},
{
id: 7,
image: '/static/images/chapter3/random/image7.png',
name: '青莲',
desc: '宋 出水芙蓉图页'
},
];
const app = getApp();
app.globalData.randomImages = imageArray;
uni.setStorageSync('randomImages', JSON.stringify(imageArray));
uni.navigateTo({
url: '/pages/chapter3/randomImage'
});
};
const goback = () => {
const app = getApp();
app.globalData.mainSliderIndex = 4;
uni.redirectTo({
url: '/pages/home/home'
});
};
onMounted(() => {
// 初始化状态
currentIndex.value = 0;
activePages.mainIndex = 0;
});
</script> </script>
<style scoped> <style scoped>
.main-swiper { .main-swiper {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
.nested-swiper { .nested-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;
} }
.cover-txt { .cover-txt {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 22%; bottom: 22%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 2; z-index: 2;
width: 74%; width: 74%;
height: 122rpx; height: 122rpx;
} }
.cover-txt2 { .cover-txt2 {
width: 60% !important; width: 60% !important;
height: 134rpx !important; height: 134rpx !important;
} }
.cover-txt9 { .cover-txt9 {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translate(-50%, -20%); transform: translate(-50%, -20%);
z-index: 2; z-index: 2;
width: 360rpx; width: 360rpx;
height: 280rpx; height: 280rpx;
} }
.btn { .btn {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 16%; bottom: 16%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 2; z-index: 2;
width: 244rpx; width: 244rpx;
height: 60rpx; height: 60rpx;
} }
.qrcode-content { .qrcode-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translate(-50%, -25%); transform: translate(-50%, -25%);
z-index: 2; z-index: 2;
} }
.qrCode { .qrCode {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
} }
.code-txt { .code-txt {
color: #333; color: #333;
font-size: 24rpx; font-size: 24rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
.gif-container { .gif-container {
background: #333333; background: #333333;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 400rpx; height: 400rpx;
z-index: 2; z-index: 2;
} }
.gif-style { .gif-style {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
</style> </style>

156
xxdf/chapter3/randomImage.vue
View File

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