From 34eb59e098f5074b943bbc42c40dc2bc30094604 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 22 Oct 2024 16:49:07 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=94=AF=E4=BB=98=E5=AE=9D=E5=B0=8F=E7=A8=8B?=
 =?UTF-8?q?=E5=BA=8F=E5=85=BC=E5=AE=B9=E6=80=A7=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/article-tabs.vue      |  4 ++--
 components/diy/goods-tabs.vue        |  4 ++--
 components/diy/modules/tabs-view.vue | 30 +++++++++++++++++++++++++---
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/components/diy/article-tabs.vue b/components/diy/article-tabs.vue
index 37d37aba..8da779c1 100644
--- a/components/diy/article-tabs.vue
+++ b/components/diy/article-tabs.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- 文章列表 -->
-    <view class="article-tabs ou" :style="style_container">
+    <view class="article-tabs ou" :class="'article-tabs-' + propKey" :style="style_container">
         <view class="ou" :style="style_img_container">
             <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
             <view class="oh">
@@ -194,7 +194,7 @@
             getTop() {
                 const query = uni.createSelectorQuery().in(this);
                 query
-                    .select('.article-tabs')
+                    .select('.article-tabs-' + this.propKey)
                     .boundingClientRect((res) => {
                         if ((res || null) != null) {
                             this.setData({
diff --git a/components/diy/goods-tabs.vue b/components/diy/goods-tabs.vue
index a1f20474..2546300d 100644
--- a/components/diy/goods-tabs.vue
+++ b/components/diy/goods-tabs.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="goods-tabs ou" :style="style_container">
+    <view class="goods-tabs ou" :class="'goods-tabs-' + propKey" :style="style_container">
         <view class="ou" :style="style_img_container">
             <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
             <view class="oh">
@@ -183,7 +183,7 @@
             getTop() {
                 const query = uni.createSelectorQuery().in(this);
                 query
-                    .select('.goods-tabs')
+                    .select('.goods-tabs-' + this.propKey)
                     .boundingClientRect((res) => {
                         if ((res || null) != null) {
                             this.setData({
diff --git a/components/diy/modules/tabs-view.vue b/components/diy/modules/tabs-view.vue
index d7899475..54fb3ec1 100644
--- a/components/diy/modules/tabs-view.vue
+++ b/components/diy/modules/tabs-view.vue
@@ -1,6 +1,7 @@
 <template>
     <!--  66rpx是自定义顶部导航栏的高度-->
-    <uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
+    <!-- <uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight"> -->
+    <view class="tabs-view" :style="tabs_sticky">
         <view class="tabs-view flex-row gap-10 jc-sb align-c" :style="propStyle + propTabsBackground">
             <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">
@@ -42,7 +43,8 @@
                 </view>
             </view>
         </componentPopup>
-    </uv-sticky>
+    </view>
+    <!-- </uv-sticky> -->
 </template>
 
 <script>
@@ -122,12 +124,34 @@
                 popup_status: false,
                 propIsBar: false,
                 tabs_bottom_line_theme: '',
+                tabs_sticky: '',
             };
         },
         watch: {
-            propValue(new_value, old_value) {
+            propValue() {
                 this.init();
             },
+            propIsTop: {
+                deep: true,
+                immediate: true,
+                handler(new_val) {
+                    if (new_val) {
+                        this.tabs_sticky = 'position: sticky;top: calc(' + parseInt(this.propTop) + 'px + ' + this.propCustomNavHeight + ');z-index: ' + this.propZIndex + ';';
+                        console.log(this.tabs_sticky);
+                        console.log(this.propTop, this.propCustomNavHeight);
+                    } else {
+                        this.tabs_sticky = '';
+                        console.log(this.tabs_sticky);
+                    }
+                },
+            },
+            propTop(new_val, old_val) {
+                if (this.propIsTop) {
+                    this.tabs_sticky = 'position: sticky;top: calc(' + parseInt(this.propTop) + 'px + ' + this.propCustomNavHeight + ');z-index: ' + this.propZIndex + ';';
+                } else {
+                    this.tabs_sticky = '';
+                }
+            },
         },
         mounted() {
             this.init();