From bba13ddefe63e61a1900ac97854e0fc34aa63cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 18 Sep 2025 17:39:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A7=86=E9=A2=91=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E9=A1=B5=E6=92=AD=E6=94=BE=E9=80=BB=E8=BE=91=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/plugins/video/detail/detail.vue      | 117 +++++++++++++++++++--
 pages/plugins/video/detail/video_list.json |  16 +--
 2 files changed, 115 insertions(+), 18 deletions(-)

diff --git a/pages/plugins/video/detail/detail.vue b/pages/plugins/video/detail/detail.vue
index c5767184..46189689 100644
--- a/pages/plugins/video/detail/detail.vue
+++ b/pages/plugins/video/detail/detail.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="content">
-        <swiper class="swiper-container" :style="swiperStyle" :vertical="true" @change="handleSwiperChange" :current="current_index">
+        <swiper class="swiper-container" :style="swiperStyle" :vertical="true" @change="handleSwiperChange" :current="current_index" :circular="close_circular ? false : true">
             <swiper-item v-for="(video, index) in display_video_list" :key="video.id">
                 <view class="video-container" @tap="toggle_play_pause">
                     
@@ -120,6 +120,8 @@
                 comment_start_y: 0, // 评论开始拖拽位置
                 comment_current_y: 0, // 评论当前拖拽位置
                 move_distance: 0,
+                current_video_id: '1', // 当前播放视频的ID
+                is_slide_start: false,
             };
         },
         computed: {
@@ -129,18 +131,79 @@
             commentContentStyle() {
                 return this.show_comment_modal ? `transform: translateY(3px); height: calc(70% - ${this.move_distance}px);` : `transform: translateY(0); height: 70%;`
             },
+            current_video_index() { 
+                return this.videoData.findIndex(item => item.id === this.current_video_id);
+            },
+            // 如果是第一个或者最后一个的情况下，取消无限轮播
+            close_circular() {
+                return this.videoData[0].id == this.current_video_id  || this.videoData[this.videoData.length - 1].id == this.current_video_id;
+            }
+        },
+        onLoad() {
+            // 初始化显示数据
+            this.init_display_data();
         },
         onReady() {
             this.videoData.forEach((item, index) => {
                 this.video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
             });
             setTimeout(() => {
-                if (this.video_contexts[0]) {
+                if (this.video_contexts[0]) { // 当前播放的视频索引为0
                     this.video_contexts[0].play();
                 }
             }, 200);
         },
         methods: {
+            // 初始化显示数据
+            init_display_data() {
+                this.current_video_id = this.videoData[0].id;
+                this.display_video_list = [
+                    this.videoData[0],       // 当前元素
+                    this.videoData[this.current_video_index + 1 ],  // 下一个元素
+                    this.videoData[this.current_video_index + 2 ]  // 下两个元素
+                ];
+            },
+            
+            // 更新显示数据
+            update_display_data() {
+                console.log(this.current_index);
+                
+                console.log('更新显示数据', this.current_video_index);
+                
+                let list = [];
+                // 如果当前索引为0，只显示当前元素和下一个元素
+                if (this.current_index == 0) {
+                    list = [
+                        this.videoData[this.current_video_index],
+                        this.videoData[this.current_video_index + 1],
+                        this.videoData[this.current_video_index + 2]
+                    ];
+                } else if (this.current_index == 1) { // 索引为1时，为确保无限轮播正常，需要改变数据插入顺序
+                    list = [
+                        this.videoData[this.current_video_index - 1],
+                        this.videoData[this.current_video_index],
+                        this.videoData[this.current_video_index + 1]
+                    ];
+                } else {
+                    list = [
+                        this.videoData[this.current_video_index + 1],
+                        this.videoData[this.current_video_index - 1],
+                        this.videoData[this.current_video_index],
+                    ];
+                }
+                console.log('更新显示数据', list);
+                
+                this.setData({
+                    display_video_list: list
+                })
+            },
+            
+            // 预加载相邻数据
+            preload_adjacent_data() {
+                // 这里可以添加预加载逻辑，比如提前加载视频封面等
+                console.log('预加载数据，当前视频ID:', this.current_video_id);
+            },
+
             handleSwiperChange(event) {
                 const { current } = event.detail;
 
@@ -154,22 +217,56 @@
                 this.current_video_progress = 0;
                 this.current_video_duration = 0;
                 this.is_seeking = false;
+                // 更新当前播放视频的ID
+                this.current_video_id = this.display_video_list[current].id;
+                // 当滑动到边界时更新显示数据
+                if (this.current_video_index == 0 && this.is_slide_start) {
+                    this.$nextTick(() => {
+                        const list = [
+                            this.videoData[this.current_video_index],
+                            this.videoData[this.current_video_index + 1],
+                            this.videoData[this.current_video_index + 2]
+                        ];
+                        this.setData({
+                            is_slide_start: false,
+                            current_index: 0,
+                            display_video_list: list
+                        })
+                    })
+                } else if (this.current_video_index == this.videoData.length - 1) {
+                    this.$nextTick(() => {
+                        const list = [
+                            this.videoData[this.current_video_index - 2],
+                            this.videoData[this.current_video_index - 1],
+                            this.videoData[this.current_video_index],
+                        ];
+                        this.setData({
+                            current_index: this.current_video_index,
+                            display_video_list: list
+                        })
+                    })
+                } else {
+                    // 预加载当前index之后的视频
+                    this.update_display_data();
+                }
 
                 setTimeout(() => {
-                    if (this.video_contexts[this.current_index]) {
-                        this.video_contexts[this.current_index].play();
+                    this.is_slide_start = true;
+                    // 播放当前视频
+                    if (this.video_contexts[current]) {
+                        this.video_contexts[current].play();
                     }
-                }, 250);
+                }, 100);
             },
 
             toggle_play_pause() {
-                if (!this.video_contexts[this.current_index]) return;
+                if (!this.video_contexts[this.current_index]) return; // 当前播放的视频索引为1
 
                 this.paused = !this.paused;
                 if (this.paused) {
-                    this.video_contexts[this.current_index].pause();
+                    this.video_contexts[this.current_index].pause(); // 暂停中间的视频
                 } else {
-                    this.video_contexts[this.current_index].play();
+                    this.video_contexts[this.current_index].play();  // 播放中间的视频
                 }
             },
 
@@ -268,8 +365,8 @@
 
             handle_slider_change(e) {
                 const seek_time = e.detail.value;
-                if (this.video_contexts[this.current_index]) {
-                    this.video_contexts[this.current_index].seek(seek_time);
+                if (this.video_contexts[1]) { // 控制中间的视频
+                    this.video_contexts[1].seek(seek_time);
                     this.current_video_progress = seek_time;
                 }
                 setTimeout(() => {
diff --git a/pages/plugins/video/detail/video_list.json b/pages/plugins/video/detail/video_list.json
index 76e3ca8c..7f4fe042 100644
--- a/pages/plugins/video/detail/video_list.json
+++ b/pages/plugins/video/detail/video_list.json
@@ -8,7 +8,7 @@
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/e6fddef474951cc15f5aeb99219b4a91.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/notes/ce5082f76cc9bd82a2bd97ce8b45ea32.jpg",
         "userHead": "http://8.146.211.120:8080/upload/notes/8f5ebdab07f9fb592895bd3f0f230ea9.jpg",
-        "commentObj": {
+        "comment_obj": {
             "count": 2,
             "list": [
                 {
@@ -37,7 +37,7 @@
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/0985b0f3879c7dca9f6c1c6fb59d4a79.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/background/dab42015a50709f68a75306a572aaaca.jpg",
         "userHead": "http://8.146.211.120:8080/upload/background/735feb718119ea7e5f206be7b4410dd6.jpg",
-        "commentObj": {
+        "comment_obj": {
             "count": 0,
             "list": []
         }
@@ -51,7 +51,7 @@
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
         "userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
-        "commentObj": {
+        "comment_obj": {
             "count": 1,
             "list": [
                 {
@@ -73,7 +73,7 @@
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
         "userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
-        "commentObj": {
+        "comment_obj": {
             "count": 1,
             "list": [
                 {
@@ -95,7 +95,7 @@
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2019/01/14/1547458876723311.mp4",
         "posterUrl": "",
         "userHead": "",
-        "commentObj": {
+        "comment_obj": {
             "count": 1,
             "list": [
                 {
@@ -117,7 +117,7 @@
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267246598639.mp4",
         "posterUrl": "",
         "userHead": "",
-        "commentObj": {
+        "comment_obj": {
             "count": 1,
             "list": [
                 {
@@ -139,7 +139,7 @@
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
         "posterUrl": "",
         "userHead": "",
-        "commentObj": {
+        "comment_obj": {
             "count": 1,
             "list": [
                 {
@@ -161,7 +161,7 @@
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
         "posterUrl": "",
         "userHead": "",
-        "commentObj": {
+        "comment_obj": {
             "count": 1,
             "list": [
                 {