From df64e29465c6595de7f7c48ee2efcb8c9b65cf8e Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Tue, 28 May 2024 05:55:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=87=AA=E5=AE=9A=E4=B9=89ta?=
 =?UTF-8?q?bbar=E7=9A=84=E4=B8=9A=E5=8A=A1=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=86=E5=8F=91=E7=8E=B0=E4=BA=86Android=E5=92=8CiOS?=
 =?UTF-8?q?=E7=9A=84v-show=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-tab-bar/custom-tab-bar-tab1.uvue   |  2 ++
 .../custom-tab-bar/custom-tab-bar.uvue        | 23 ++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue b/pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue
index ba8c97f0..9c781aa6 100644
--- a/pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue
+++ b/pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue
@@ -24,6 +24,7 @@
     },
     created() {
       this.loadData()
+      console.log("tab1 created");
     },
     methods: {
       loadData() {
@@ -40,6 +41,7 @@
       },
       scrollTop(top : number) {
         (this.$refs["listView"] as UniElement).scrollTop = top
+        console.log("tab1 to top");
       }
     }
   }
diff --git a/pages/template/custom-tab-bar/custom-tab-bar.uvue b/pages/template/custom-tab-bar/custom-tab-bar.uvue
index bf159776..186f71e1 100644
--- a/pages/template/custom-tab-bar/custom-tab-bar.uvue
+++ b/pages/template/custom-tab-bar/custom-tab-bar.uvue
@@ -1,6 +1,7 @@
 <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>
     </view>
@@ -65,11 +66,12 @@
         ] as TabItem[],
         selectedIndex: -1,
         displayArrow: false,
+        lastTab1Top:0,
         tabViewHeight: 0
       }
     },
     onLoad() {
-      uni.$on('tabchange', this.onTabPageEvent)
+      uni.$on('tabchange', this.onTabPageEvent) //监听tab1页面发出的tabchange事件，触发到本页面的onTabPageEvent方法。为了判断tab1的scroll-view滚动距离
     },
     onReady() {
       this.setSelectedIndex(0)
@@ -80,14 +82,29 @@
     },
     methods: {
       onTabClick(index : number) {
-        if (this.selectedIndex == index && index == 0) {
+        if (this.selectedIndex == index && index == 0 && this.displayArrow == true) { //首页当tab按钮变成向上时，点向上就滚动到顶
+          console.log("11");
           this.displayArrow = false;
           (this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
         }
+        else if (index !=0){ //不在首页时，把箭头变成图标
+          console.log("22");
+          this.displayArrow = false
+        }
+        else if (index == 0 && this.selectedIndex !=0){ //从其他tab切回首页时，检查是否需要把图标变箭头
+          console.log("33",this.lastTab1Top);
+          this.displayArrow = this.lastTab1Top > this.tabViewHeight
+        }
         this.setSelectedIndex(index);
+        console.log('index: ',index);
+        console.log('this.selectedIndex: ',this.selectedIndex);
+        console.log('this.displayArrow: ',this.displayArrow);
+        console.log('this.lastTab1Top: ',this.lastTab1Top);
       },
       onTabPageEvent(top : number) {
-        this.displayArrow = top > this.tabViewHeight
+        // console.log('top: ',top); //iOS在v-show为false时，不应该触发这个事件
+        this.displayArrow = top > this.tabViewHeight //滚动1屏后，就把第一个tab的图标从首页变成向上箭头
+        this.lastTab1Top = top
       },
       setSelectedIndex(index : number) {
         if (this.selectedIndex === index) {
-- 
GitLab