From f0bab19bd54335a38860f49946d5465e637abb4f 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, 12 Mar 2026 17:13:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9nvue=E4=B8=BAcss=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/bottom-line/bottom-line.vue        |   2 +
 components/no-data/no-data.vue                |   5 +
 components/user-base/user-base.vue            |   7 +
 .../plugins/video/components/comment-info.vue |  10 +-
 pages/plugins/video/components/loading.vue    |   4 +-
 pages/plugins/video/detail/detail-nvue.css    |  11 +-
 pages/plugins/video/detail/detail.nvue        | 175 ++++++------------
 7 files changed, 81 insertions(+), 133 deletions(-)

diff --git a/components/bottom-line/bottom-line.vue b/components/bottom-line/bottom-line.vue
index a32a647f..ea82b7bb 100644
--- a/components/bottom-line/bottom-line.vue
+++ b/components/bottom-line/bottom-line.vue
@@ -42,9 +42,11 @@
         padding: 40rpx;
         overflow: hidden;
     }
+    /* #ifndef APP-NVUE */
     .data-bottom-line .bottom-exclude {
         padding-bottom: env(safe-area-inset-bottom);
     }
+    /* #endif */
     .data-bottom-line .line-item {
         width: 33.3%;
     }
diff --git a/components/no-data/no-data.vue b/components/no-data/no-data.vue
index 372bf3da..2c80edd0 100644
--- a/components/no-data/no-data.vue
+++ b/components/no-data/no-data.vue
@@ -296,7 +296,12 @@
         position: absolute;
         width: 140rpx;
         height: 140rpx;
+        /* #ifndef APP-NVUE */
         left: calc(50% - 70rpx);
+        /* #endif */
+        /* #ifdef APP-NVUE */
+        left: 0;
+        /* #endif */
         top: 0;
         border-radius: 50%;
         overflow: hidden;
diff --git a/components/user-base/user-base.vue b/components/user-base/user-base.vue
index f7ec36f3..898e3b34 100644
--- a/components/user-base/user-base.vue
+++ b/components/user-base/user-base.vue
@@ -448,10 +448,12 @@
         line-height: 70rpx;
         margin-bottom: 0;
     }
+    /* #ifndef APP-NVUE */
     .user-base-popup .user-nickname-container,
     .user-base-popup .user-mobile-container {
         width: calc(100% - 120rpx);
     }
+    /* #endif */
     .form-container .form-gorup {
         padding: 24rpx 0;
         border-radius: 0;
@@ -464,7 +466,12 @@
         height: 84rpx;
         line-height: 84rpx;
         padding: 0;
+        /* #ifndef APP-NVUE */
         display: inline-flex;
+        /* #endif */
+        /* #ifdef APP-NVUE */
+        display: flex;
+        /* #endif */
         align-items: center;
         justify-content: center;
         border-radius: 12rpx;
diff --git a/pages/plugins/video/components/comment-info.vue b/pages/plugins/video/components/comment-info.vue
index ef782876..508faa24 100644
--- a/pages/plugins/video/components/comment-info.vue
+++ b/pages/plugins/video/components/comment-info.vue
@@ -127,10 +127,13 @@
                 if (!app.globalData.is_single_page_check()) {
                    return false;
                 }
-               var user= app.globalData.get_user_info(this, 'comment_like', e);
+                var user= app.globalData.get_user_info(this, 'comment_like', e);
                 if (user != false) {
                     this.$emit('comment_like', this.propId, e);
                 }
+                //#ifdef APP-NVUE
+                e.stopPropagation();
+                //#endif 
             },
             // 上传图片预览
             upload_show_event(e) {
@@ -217,7 +220,7 @@
     line-height: 34rpx;
 }
 .comment-reply {
-    font-weight: blod;
+    font-weight: 700;
     font-size: 24rpx;
     color: #666666;
     line-height: 34rpx;
@@ -258,7 +261,7 @@
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
-    
+    /* #ifndef APP-NVUE */
     &:not(.dropdown-item-divided):active {
         background-color: #f5f5f5;
     }
@@ -272,6 +275,7 @@
         height: 1rpx;
         background-color: #f0f0f0;
     }
+    /* #endif */
     
     &:first-child {
         border-radius: 8rpx 8rpx 0 0;
diff --git a/pages/plugins/video/components/loading.vue b/pages/plugins/video/components/loading.vue
index 75d4853d..9858ea68 100644
--- a/pages/plugins/video/components/loading.vue
+++ b/pages/plugins/video/components/loading.vue
@@ -4,7 +4,7 @@
             <view class="more-history-btn-icon margin-right-xs">
                 <u-icon propName="reset" propSize="28rpx" propColor="#999"></u-icon>
             </view>
-            <text style="font-size: 28rpx;color: #999999; line-height: 40rpx;">{{ propContent || $t('common.loading_in_text') }}</text>
+            <text style="font-size: 28rpx;color: #999999;line-height: 40rpx;">{{ propContent || $t('common.loading_in_text') }}</text>
         </view>
     </view>
 </template>
@@ -34,6 +34,7 @@
     line-height: 40rpx;
     margin-top: 20rpx;
 }
+/* #ifndef APP-NVUE */  
 .more-history-btn-icon {
     animation: rotate 1s linear infinite;
 }
@@ -45,4 +46,5 @@
         transform: rotate(360deg);
     }
 }
+/* #endif */
 </style>
\ No newline at end of file
diff --git a/pages/plugins/video/detail/detail-nvue.css b/pages/plugins/video/detail/detail-nvue.css
index b25ead5f..718b23c3 100644
--- a/pages/plugins/video/detail/detail-nvue.css
+++ b/pages/plugins/video/detail/detail-nvue.css
@@ -9,7 +9,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    pointer-events: none;
 }
 
 .play-icon-bg {
@@ -99,9 +98,7 @@
     font-size: 36rpx;
     font-weight: bold;
 }
-::v-deep .uni-video-container {
-    background: transparent;
-}
+
 .video-bg {
     position: absolute;
     top: 0;
@@ -128,7 +125,6 @@
 }
 
 .video-content {
-    display: block;
     font-size: 30rpx;
     margin-top: 16rpx;
     max-width: 70%;
@@ -315,11 +311,6 @@
     left: 0;
     z-index: 9;
 }
-.header-top ::v-deep .search-bar {
-    background:#D8D8D8;
-    opacity: 0.27;
-    border-color: transparent;
-}
 
 .keyboard-input {
     position: fixed;
diff --git a/pages/plugins/video/detail/detail.nvue b/pages/plugins/video/detail/detail.nvue
index 022e2c07..252c7e40 100644
--- a/pages/plugins/video/detail/detail.nvue
+++ b/pages/plugins/video/detail/detail.nvue
@@ -1,10 +1,10 @@
 <template>
     <view :class="theme_view" :style="width_height_style">
-        <view v-if="display_video_list && display_video_list.length > 0" class="content pr" :style="width_height_style">
+        <view v-if="video_data_list && video_data_list.length > 0" class="content pr" :style="width_height_style">
             <!-- 视频列表 -->
-            <swiper class="swiper-container" :key="'top-or-buttom-' + swiper_key" :style="width_height_style + swiperStyle" :duration="300" :vertical="true" :circular="false" :skip-hidden-item-layout="true" :current="current_index" easing-function="linear" @transition="on_transition" @change="handle_swiper_change">
-                <swiper-item v-for="(video_item, index) in display_video_list" :key="video_item.id" :style="width_height_style">
-                    <view class="pr" @tap.stop="toggle_play_pause" :style="width_height_style" @touchstart.prevent="handle_swiper_touch_start" @touchmove.prevent="handle_swiper_touch_move" @touchend="handle_swiper_touch_end">
+            <view class="swiper" ref="swiper" :style="width_height_style">
+                <block v-for="(video_item, index) in video_data_list" :key="video_item.id">
+                    <view class="pr" @tap.stop="toggle_play_pause" @touchstart.prevent="ListTouchStart" @touchmove.prevent="ListTouchMove">
                         <view class="video-bg" :style="(!isEmpty(video_item.cover) ? 'background-image: url(' + video_item.cover + ')' : '') + width_height_style"></view>
                         
                         <video class="video" :style="width_height_style + swiperStyle" :src="video_item.video_url" :poster="video_item.cover" :id="`video_${index}`" :loop="true" :show-fullscreen-btn="false" :show-center-play-btn="false" :show-play-btn="false" :controls="false" :show-mute-btn="true" object-fit="contain" @timeupdate="handle_time_update" @play="handle_play" @tap.stop="toggle_play_pause"></video>
@@ -64,8 +64,8 @@
                             </view>
                         </template>
                     </view>
-                </swiper-item>
-            </swiper>
+                </block>
+            </view>
             <!-- 搜索框 -->
             <view v-if="!show_comment_modal" class="header-top" :style="top_content_style + menu_button_info + ' width: ' + windowWidth + 'px;'">
                 <view id="search-height" class="flex-row align-c">
@@ -250,7 +250,8 @@
     import componentNoData from '@/components/no-data/no-data';
     import componentBottomLine from '@/components/bottom-line/bottom-line';
     import componentPopup from '@/components/popup/popup';
-    import componentUpload from '@/components/upload/upload';
+    import componentUpload from '@/components/upload/upload';
+    import scrollMixins from './scrollMixins';
     // 多语言
     //#ifdef APP-NVUE
     import i18n from '@/locale/index.js';
@@ -267,7 +268,8 @@
     export default {
         //#ifdef APP-NVUE
         i18n,
-        //#endif
+        //#endif
+        mixins:[scrollMixins],
         data() {
             return {
                 theme_view: app.globalData.get_theme_value_view(),
@@ -514,7 +516,14 @@
                     this.menu_button_info = menu_button_info;
                     this.current_video_id = isEmpty(this.current_video_id) ? this.params.id : this.current_video_id;
                     
-                    this.get_video_detail(this.current_video_id);
+                    this.get_video_detail(this.current_video_id);
+                    
+                    //设置参数
+                    this.typeX = false //开启左右滑动
+                    this.playCount = 2 //剩余多少视频加载视频列表
+                    this.startDistance = 5 //判断左右上下拖动的启动距离 px
+                    this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
+                    this.backDistance = 200 //判断上下滑动的回弹距离 px
                 } catch (error) {
                     console.error('init error:', error);
                 }
@@ -545,7 +554,7 @@
                                     this.base_config_data = new_data.base_config_data;
                                     this.editor_path_type = new_data.editor_path_type;
                                 
-                                    this.get_last_or_next_data_list(this.params.id, 1, 1);
+                                    this.get_last_or_next_data_list(this.params.id, 0, 1);
                                 } else {
                                     this.data_list_loding_status =  0;
                                     this.data_tabs_loding_msg = data.msg;
@@ -636,45 +645,21 @@
                                 // 更新所有视频信息
                                 // this.video_data_list = this.video_data_list;
                                 this.$set(this, 'video_data_list', this.video_data_list);
+                                this.video_data_list.forEach((item, index) => {
+                                    // this.create_video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
+                                    this.$set(this.create_video_contexts, index, uni.createVideoContext(`video_${index}`, this));  
+                                });
                                 // 逻辑说明：当是最后一个视频且需要播放下一个时，根据数组长度和新索引计算新的当前索引
                                 // - 数组长度 > 2 时：新索引是最后一个元素则返回 2，是倒数第二个则返回 1，否则返回 0
                                 // - 数组长度 <= 2 时：返回 length - 1
-                                this.current_index = is_last == 1 && is_next == 1 ? this.calculate_new_index(this.video_data_list.length, new_index) : this.current_index;
+                                this.current_index = is_last == 1 && is_next == 1 ? new_index : this.current_index;
 
-                                if (is_last == 1 && is_next == 1) {
+                                if (is_next == 1) {
                                     setTimeout(() => { 
-                                        // 更新显示数据数据信息
-                                        this.update_display_data();
-                                        
-                                        setTimeout(() => {
-                                            
-                                            if (this.display_video_list && this.display_video_list.length > 0) {
-                                                // 更新分享信息
-                                                this.update_share_info(this.display_video_list[this.current_index]);
-                                                console.log(this.display_video_list.length);
-                                                this.display_video_list.forEach((item, index) => {
-                                                    // this.create_video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
-                                                    this.$set(this.create_video_contexts, index, uni.createVideoContext(`video_${index}`, this));  
-                                                    //#ifdef H5
-                                                    if (document.getElementById(`video_${index}`) != null && this.video_contexts) { 
-                                                        // this.video_contexts[index] = document.getElementById(`video_${index}`).querySelector('video');
-                                                        this.$set(this.video_contexts, index, document.getElementById(`video_${index}`).querySelector('video'));  
-                                                    }
-                                                    //#endif
-                                                });
-                                            }
-                                            
-                                            //#ifdef H5
-                                            if (this.video_contexts && this.video_contexts[this.current_index]) { // 当前播放的视频索引为 0
-                                                this.video_play_event(this.video_contexts[this.current_index], true);
-                                            }
-                                            //#endif
-                                            //#ifndef H5
-                                            if (this.create_video_contexts && this.create_video_contexts[this.current_index]) { // 当前播放的视频索引为 0
-                                                this.video_play_event(this.create_video_contexts[this.current_index], true);
-                                            }
-                                            //#endif
-                                        }, 200);
+                                        // const index = this.video_data_list.findIndex(item => item.id == this.current_index);
+                                        if (this.create_video_contexts && this.create_video_contexts[this.current_index]) { // 当前播放的视频索引为 0
+                                            this.video_play_event(this.create_video_contexts[this.current_index], true);
+                                        }
                                     }, 100);
                                 }
                             }
@@ -684,40 +669,6 @@
                     console.error('get_last_or_next_data_list error:', error);
                 }
             },
-            /**
-             * 计算新的视频索引
-             * 当是最后一个视频且需要播放下一个时，根据数组长度和新索引计算新的当前索引
-             * @param {number} listLength - 视频列表长度
-             * @param {number} newIndex - 新视频在列表中的索引
-             * @returns {number} 计算后的新索引
-             */
-            calculate_new_index(listLength, newIndex) {
-                try {
-                    // 边界处理：空数组
-                    if (listLength === 0) {
-                        return 0;
-                    }
-                    
-                    // 数组长度 <= 2 时，返回最后一个索引
-                    if (listLength <= 2) {
-                        return listLength - 1;
-                    }
-                    
-                    // 数组长度 > 2 时，根据新索引位置返回对应值
-                    // 新索引是最后一个元素 -> 返回 2
-                    if (newIndex === listLength - 1) {
-                        return 2;
-                    }
-                    // 新索引是倒数第二个元素 -> 返回 1
-                    if (newIndex === listLength - 2) {
-                        return 1;
-                    }
-                    // 其他情况 -> 返回 0
-                    return 0;
-                } catch (error) {
-                    console.error('calculate_new_index error:', error);
-                }   
-            },
             // 视频拖拽开始
             handle_swiper_touch_start(e) {
                 try {
@@ -765,7 +716,7 @@
                 try {
                     const move_distance = this.swiper_current_y - this.swiper_start_y;
                     // 判断滑动方向：向下为正，向上为负
-                    if (Math.abs(move_distance) > (this.windowHeight * 0.3)) {
+                    if (Math.abs(move_distance) > (this.windowHeight * 0.25)) {
                         // 只有滑动距离超过屏幕高度的 15% 才触发切换
                         if (move_distance > 0) {
                             // 向下滑动，切换到上一个视频
@@ -802,29 +753,14 @@
                         if (this.current_video_index <= 0) {
                             app.globalData.showToast('已经是第一个视频了');
                             return;
-                        } else {
-                            new_index = this.current_index - 1 < 0 ? 2 : (this.current_index - 1);
                         }
                     } else if (direction === 'next') {
                         // 向上滑动，切换到下一个
                         if (this.current_video_index >= this.video_data_list.length - 1) {
                             app.globalData.showToast('已经是最后一个视频了');
                             return;
-                        } else {
-                            console.log('new_index', this.current_index);
-                            new_index = this.current_index + 1 > 2 ? 0 : (this.current_index + 1);
                         }
                     }
-                    console.log('new_index', new_index);
-                    // 创建模拟的 event 对象
-                    const mockEvent = {
-                        detail: {
-                            current: new_index
-                        }
-                    };
-                    
-                    // 调用原有的处理逻辑
-                    this.handle_swiper_change(mockEvent);
                 } catch (error) {
                     console.error('handle_swiper_change_by_direction error:', error);
                 }
@@ -853,7 +789,6 @@
 
                     const id = this?.display_video_list[current]?.id || '';
                     // 更新状态
-                    this.current_index = current;
                     this.paused = false;
                     this.is_manual_pause = false;
                     this.current_video_progress = 0;
@@ -872,36 +807,38 @@
                     const index = this.video_data_list.findIndex(item => item.id == id);
                     
                     // 数据预加载逻辑
-                    if (index < 2 && this.direction == 'prev') {
-                        this.get_last_or_next_data_list(this.video_data_list[0].id, 1, 0);
-                    } else if (index < this.video_data_list.length - 3 && this.direction == 'next') {
+                    // if (index < 2 && this.direction == 'prev') {
+                    //     this.get_last_or_next_data_list(this.video_data_list[0].id, 1, 0);
+                    // } else 
+                    if (index < this.video_data_list.length - 3 && this.direction == 'next') {
                         this.get_last_or_next_data_list(this.video_data_list[this.video_data_list.length - 1].id, 0, 1);
                     }
                     // 获取视频详细信息
                     this.get_video_data_detail(id);
-                    // 边界处理逻辑
-                    if (this.current_video_index == 0 && this.is_slide_start) {
-                        const list = this.update_video_list([0, 1, 2]);
+                    // // 边界处理逻辑
+                    // if (this.current_video_index == 0 && this.is_slide_start) {
+                    //     const list = this.update_video_list([0, 1, 2]);
                         
-                        this.is_slide_start = false;
-                        this.current_index = 0;
-                        // this.swiper_key = get_math();
-                        // 刷新数据
-                        this.update_display_video_list(list);
-                    } else if (this.current_video_index == this.video_data_list.length - 1) {
-                        const list = this.update_video_list([-2, -1, 0]);
-                        this.current_index = list.length - 1;
-                        // this.swiper_key = get_math();
-                        // 刷新数据
-                        this.update_display_video_list(list);
-                    } else {
-                        this.is_slide_start = true;
-                        // this.swiper_key = get_math();
-                        this.update_display_data();
-                    }
+                    //     this.is_slide_start = false;
+                    //     this.current_index = 0;
+                    //     // this.swiper_key = get_math();
+                    //     // 刷新数据
+                    //     this.update_display_video_list(list);
+                    // } else if (this.current_video_index == this.video_data_list.length - 1) {
+                    //     const list = this.update_video_list([-2, -1, 0]);
+                    //     this.current_index = list.length - 1;
+                    //     // this.swiper_key = get_math();
+                    //     // 刷新数据
+                    //     this.update_display_video_list(list);
+                    // } else {
+                    //     this.is_slide_start = true;
+                    //     // this.swiper_key = get_math();
+                    //     this.update_display_data();
+                    // }
                     // 更新分享信息
-                    this.update_share_info(this.display_video_list[current]);
-                    this.swiper_key = get_math();
+                    this.update_share_info(this.display_video_list[this.current_video_index]);
+                    // this.swiper_key = get_math();
+                    // this.$forceUpdate();
                     // 延迟播放当前视频，确保DOM更新完成
                     setTimeout(() => {
                         this.play_current_video_safely(this.current_index);