From 3915794ff03d97445f8508cfdfa1a86f30ec4dc3 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 26 Sep 2024 14:57:24 +0800
Subject: [PATCH] =?UTF-8?q?1.diy---=E7=BD=AE=E9=A1=B6=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/css/page.css                  |  3 ++
 components/diy/article-tabs.vue      | 44 +++++++++++++++++++++++-----
 components/diy/goods-tabs.vue        | 44 +++++++++++++++++++++++-----
 components/diy/modules/tabs-view.vue |  9 ++++--
 components/diy/tabs.vue              | 25 ++--------------
 5 files changed, 84 insertions(+), 41 deletions(-)

diff --git a/common/css/page.css b/common/css/page.css
index 43ba7165..43ed5f8e 100644
--- a/common/css/page.css
+++ b/common/css/page.css
@@ -196,6 +196,9 @@ button:before {
 .oa {
     overflow: auto;
 }
+.ou {
+    overflow: unset !important;
+}
 .dis-none {
     display: none !important;
 }
diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index d699b44f..900f586c 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 文章列表 -->
-    <view class="overflow-unset" :style="style_container">
-        <componentDiyModulesTabsView :propValue="article_tabs" :isTop="top_up == '1'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+    <view class="ou" :style="style_container">
+        <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="tabs_top" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="padding-top oh">
             <componentDiyArticleList :key="key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
         </view>
@@ -9,9 +9,14 @@
 </template>
 
 <script>
+    const app = getApp();
     import { common_styles_computer, get_math } from '@/common/js/common/common.js';
     import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
-    import componentDiyArticleList from '@/components/diy/article-list';
+    import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度
+    var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
+    // #ifdef MP-TOUTIAO
+    bar_height = 0;
+    // #endif
     export default {
         props: {
             propValue: {
@@ -33,12 +38,30 @@
                 style: '',
                 article_tabs: {},
                 key: 1,
+                // 是否滑动置顶
                 top_up: '0',
+                // 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
+                // #ifdef MP
+                sticky_offset: bar_height + 5 + 12 + 33,
+                tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
+                // #endif
+                // #ifdef H5 || MP-TOUTIAO
+                sticky_offset: bar_height + 7 + 12 + 33,
+                tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
+                // #endif
+                // #ifdef APP
+                sticky_offset: bar_height + 0 + 12 + 33,
+                tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
+                // #endif
+                tabs_style: '',
             };
         },
         created() {
             this.init();
         },
+        mounted() {
+            window.addEventListener('scroll', this.handle_scroll);
+        },
         methods: {
             init() {
                 const new_content = this.propValue.content || {};
@@ -81,11 +104,16 @@
                     key: get_math(),
                 });
             },
+            handle_scroll() {
+                // 判断是否吸顶了
+                if (window.scrollY >= this.sticky_offset) {
+                    const new_style = this.propValue.style || {};
+                    this.setData({
+                        tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
+                    });
+                }
+            },
         },
     };
 </script>
-<style lang="scss" scoped>
-    .overflow-unset {
-        overflow: unset !important;
-    }
-</style>
+<style lang="scss" scoped></style>
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index 9922e966..466745fa 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -1,6 +1,6 @@
 <template>
-    <view class="overflow-unset" :style="style_container">
-        <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
+    <view class="ou" :style="style_container">
+        <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="tabs_top" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
         <view class="padding-top oh">
             <componentGoodsList :key="key" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
         </view>
@@ -8,9 +8,14 @@
 </template>
 
 <script>
+    const app = getApp();
     import { common_styles_computer, get_math } from '@/common/js/common/common.js';
     import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
-    import componentGoodsList from '@/components/diy/goods-list';
+    import componentGoodsList from '@/components/diy/goods-list'; // 状态栏高度
+    var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
+    // #ifdef MP-TOUTIAO
+    bar_height = 0;
+    // #endif
     export default {
         components: {
             componentDiyModulesTabsView,
@@ -29,12 +34,30 @@
                 style_container: '',
                 goods_tabs: {},
                 key: 1,
+                // 是否滑动置顶
                 top_up: '0',
+                // 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
+                // #ifdef MP
+                sticky_offset: bar_height + 5 + 12 + 33,
+                tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
+                // #endif
+                // #ifdef H5 || MP-TOUTIAO
+                sticky_offset: bar_height + 7 + 12 + 33,
+                tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
+                // #endif
+                // #ifdef APP
+                sticky_offset: bar_height + 0 + 12 + 33,
+                tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
+                // #endif
+                tabs_style: '',
             };
         },
         created() {
             this.init();
         },
+        mounted() {
+            window.addEventListener('scroll', this.handle_scroll);
+        },
         methods: {
             init() {
                 const new_content = this.propValue.content || {};
@@ -70,12 +93,17 @@
                     key: get_math(),
                 });
             },
+            handle_scroll() {
+                // 判断是否吸顶了
+                if (window.scrollY >= this.sticky_offset) {
+                    const new_style = this.propValue.style || {};
+                    this.setData({
+                        tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
+                    });
+                }
+            },
         },
     };
 </script>
 
-<style scoped lang="scss">
-    .overflow-unset {
-        overflow: unset !important;
-    }
-</style>
+<style scoped lang="scss"></style>
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index e0157cfe..55cafc88 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 文章列表 -->
-    <view class="container" :class="propIsTop ? 'tabs-top' : ''" :style="'top:' + propTop + 'px;'">
-        <view class="flex-row gap-10 jc-sb align-c">
+    <view class="container" :class="propIsTop ? 'tabs-top' : ''" :style="'top:' + propTop">
+        <view class="flex-row gap-10 jc-sb align-c" :style="propStyle">
             <view class="tabs flex-1 flex-width">
                 <scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
                     <view class="flex-row" :style="'column-gap: ' + tabs_spacing + 'rpx;'">
@@ -70,6 +70,11 @@
                 type: String,
                 default: '0',
             },
+            // 指定样式
+            propStyle: {
+                type: String,
+                default: '',
+            },
         },
         components: {
             componentPopup,
diff --git a/components/diy/tabs.vue b/components/diy/tabs.vue
index e1a95db3..7b241689 100644
--- a/components/diy/tabs.vue
+++ b/components/diy/tabs.vue
@@ -1,18 +1,7 @@
 <template>
     <!-- 选项卡 -->
-    <view class="pr">
-        <view v-if="top_up == '1'" class="tabs-top">
-            <view class="seize-seat" :style="tabs_top"></view>
-            <view :style="style_container">
-                <componentDiyModulesTabsView :propValue="tabs_data" isTabs @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
-            </view>
-        </view>
-        <!-- 占位 -->
-        <view class="pr" :class="top_up == '1' ? 'vs-hide' : ''">
-            <view :style="style_container">
-                <componentDiyModulesTabsView :propValue="tabs_data" isTabs @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
-            </view>
-        </view>
+    <view class="ou" :style="style_container">
+        <componentDiyModulesTabsView :propValue="tabs_data" :propIsTabs="top_up == '1'" :propTop="tabs_top" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
     </view>
 </template>
 
@@ -103,14 +92,4 @@
         z-index: 101;
         position: relative;
     }
-    .vs-hide {
-        visibility: hidden;
-    }
-    .tabs-top {
-        position: fixed;
-        z-index: 101;
-        left: 0;
-        right: 0;
-        top: 0;
-    }
 </style>