From 0c87f44d6b11c93d7b2336da8df64db44f96a254 Mon Sep 17 00:00:00 2001
From: yanyilin <yanyilin@dcloud.io>
Date: Wed, 29 May 2024 20:30:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=87=AA=E5=AE=9A=E4=B9=89ta?=
 =?UTF-8?q?bbar=E7=A4=BA=E4=BE=8B=EF=BC=8C=E4=BD=BF=E7=94=A8visibility?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2v-show=E5=AE=9E=E7=8E=B0tab=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-tab-bar/custom-tab-bar.uvue        | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/pages/template/custom-tab-bar/custom-tab-bar.uvue b/pages/template/custom-tab-bar/custom-tab-bar.uvue
index 186f71e1..f0a91eb5 100644
--- a/pages/template/custom-tab-bar/custom-tab-bar.uvue
+++ b/pages/template/custom-tab-bar/custom-tab-bar.uvue
@@ -1,9 +1,9 @@
 <template>
   <view class="tabs">
     <view ref="tabview" class="tab-view">
-      <!-- 注意tab的逻辑是：第一次使用v-if创建，创建之后不再使用v-if，而使用v-show来隐藏和显示。不能设置tab的v-if为false，因为销毁再创建影响性能 -->
-      <tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1>
-      <tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2>
+      <!-- 注意tab的逻辑是：第一次使用v-if创建，创建之后不再使用v-if，而是设置visibility来隐藏和显示。不能设置tab的v-if为false，因为销毁再创建影响性能 -->
+      <tab1 ref="tab1" class="tab-page" v-if="tabList[0].init" :style="{visibility:(selectedIndex==0?'visible':'hidden')}"></tab1>
+      <tab2 ref="tab2" class="tab-page" v-if="tabList[1].init" :style="{visibility:(selectedIndex==1?'visible':'hidden')}"></tab2>
     </view>
     <view ref="tabbar" class="tab-bar">
       <view class="tab-item" @click="onTabClick(0)">
@@ -56,7 +56,7 @@
       return {
         tabList: [
           {
-            init: false,
+            init: true,
             preload: false
           } as TabItem,
           {
@@ -64,7 +64,7 @@
             preload: false
           } as TabItem,
         ] as TabItem[],
-        selectedIndex: -1,
+        selectedIndex: 0,
         displayArrow: false,
         lastTab1Top:0,
         tabViewHeight: 0
@@ -74,7 +74,7 @@
       uni.$on('tabchange', this.onTabPageEvent) //监听tab1页面发出的tabchange事件，触发到本页面的onTabPageEvent方法。为了判断tab1的scroll-view滚动距离
     },
     onReady() {
-      this.setSelectedIndex(0)
+      // this.setSelectedIndex(0)
       this.tabViewHeight = (this.$refs["tabview"] as UniElement).getBoundingClientRect().height
     },
     onUnload() {
@@ -86,13 +86,14 @@
           console.log("11");
           this.displayArrow = false;
           (this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
+          this.lastTab1Top = 0;//Todo: 临时解决android平台scroll-view在某些情况未触发onscroll事件的bug
         }
         else if (index !=0){ //不在首页时，把箭头变成图标
           console.log("22");
           this.displayArrow = false
         }
         else if (index == 0 && this.selectedIndex !=0){ //从其他tab切回首页时，检查是否需要把图标变箭头
-          console.log("33",this.lastTab1Top);
+          console.log("33",this.lastTab1Top, this.tabViewHeight);
           this.displayArrow = this.lastTab1Top > this.tabViewHeight
         }
         this.setSelectedIndex(index);
@@ -148,6 +149,12 @@
     flex: 1;
   }
 
+  .tab-page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
   .tab-bar {
     flex-direction: row;
     height: 56px;
-- 
GitLab