From af8e4595056a1588f382db35c534129e1f695db1 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Tue, 19 Sep 2023 10:54:22 +0800
Subject: [PATCH] =?UTF-8?q?custom-tab-bar:=20=E8=B0=83=E6=95=B4=E7=AE=AD?=
 =?UTF-8?q?=E5=A4=B4=E6=95=88=E6=9E=9C=EF=BC=8C=E5=90=88=E5=B9=B6=E4=B8=BA?=
 =?UTF-8?q?1=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   6 -
 pages/tabBar/template.uvue                    |  12 +-
 .../custom-tab-bar/custom-tab-bar.uvue        |  94 +++++++--
 .../custom-tab-bar2/custom-tab-bar2-tab1.uvue |  60 ------
 .../custom-tab-bar2/custom-tab-bar2-tab2.uvue |  24 ---
 .../custom-tab-bar2/custom-tab-bar2.uvue      | 183 ------------------
 6 files changed, 75 insertions(+), 304 deletions(-)
 delete mode 100644 pages/template/custom-tab-bar2/custom-tab-bar2-tab1.uvue
 delete mode 100644 pages/template/custom-tab-bar2/custom-tab-bar2-tab2.uvue
 delete mode 100644 pages/template/custom-tab-bar2/custom-tab-bar2.uvue

diff --git a/pages.json b/pages.json
index dab0a970..a5993bb2 100644
--- a/pages.json
+++ b/pages.json
@@ -933,12 +933,6 @@
       "style": {
         "navigationBarTitleText": "自定义TabBar"
       }
-    },
-    {
-      "path": "pages/template/custom-tab-bar2/custom-tab-bar2",
-      "style": {
-        "navigationBarTitleText": "自定义TabBar2"
-      }
     }
   ],
   "globalStyle": {
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 6f27a4a1..ddd37f78 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -172,16 +172,8 @@ export default {
           url: 'custom-tab-bar',
           name: '自定义TabBar',
           open: false,
-          pages: [
-            {
-              name: '滚动切换图标',
-              url:'custom-tab-bar'
-            },
-            {
-              name: '凹口',
-              url:'custom-tab-bar2'
-            },
-          ] as Page[],
+          enable: true,
+          pages: [] as Page[],
         },
         {
           id: 'calendar',
diff --git a/pages/template/custom-tab-bar/custom-tab-bar.uvue b/pages/template/custom-tab-bar/custom-tab-bar.uvue
index 3c1b7b6e..86539345 100644
--- a/pages/template/custom-tab-bar/custom-tab-bar.uvue
+++ b/pages/template/custom-tab-bar/custom-tab-bar.uvue
@@ -1,15 +1,26 @@
 <template>
-  <view class="custom-tab-bar">
-    <view class="tab-view">
+  <view class="tabs">
+    <view ref="tabview" class="tab-view">
       <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>
-    <view class="tab-bar">
+    <view ref="tabbar" class="tab-bar">
       <view class="tab-item" @click="onTabClick(0)">
         <view ref="tab-item1" class="tab-item-content">
-          <text class="tab-item-icon tab-item-icon1 uni-icon" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
-            {{'\ue6be'}}
+          <text v-if="displayArrow" class="tab-item-icon tab-item-arrow uni-icon" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
+            {{'\ue6bd'}}
           </text>
+          <text v-if="!displayArrow" class="tab-item-icon uni-icon"
+            :class="selectedIndex==0 ? 'tab-item-text-active' : ''">{{'\ue644'}}</text>
+          <text v-if="!displayArrow" class="tab-item-text" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
+            首页
+          </text>
+        </view>
+      </view>
+      <view>
+        <image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
+        <view class="btn-plus" @click="onPlusClick">
+          <text class="btn-plus-text">+</text>
         </view>
       </view>
       <view class="tab-item" @click="onTabClick(1)">
@@ -50,17 +61,20 @@
             init: false
           } as TabItem,
         ] as TabItem[],
-        selectedIndex: -1
+        selectedIndex: -1,
+        displayArrow: false,
+        $tabViewHeight: 0
       }
     },
     onLoad() {
       uni.$on('tabchange', this.onTabPageEvent)
     },
-    onUnload() {
-      uni.$off('tabchange', this.onTabPageEvent)
-    },
     onReady() {
       this.setSelectedIndex(0)
+      this.$tabViewHeight = (this.$refs["tabview"] as Element).getBoundingClientRect().height
+    },
+    onUnload() {
+      uni.$off('tabchange', this.onTabPageEvent)
     },
     methods: {
       onTabClick(index : number) {
@@ -70,9 +84,10 @@
         }
       },
       onTabPageEvent(top : number) {
-        const tabItem1 = this.$refs["tab-item1"] as Element
-        const angle = top < 50 ? 0 : 180
-        tabItem1.style.setProperty('transform', `rotate(${angle}deg)`)
+        // const tabItem1 = this.$refs["tab-item1"] as Element
+        this.displayArrow = top > this.$tabViewHeight
+        // const angle = displayIcon ? 180 : 0
+        // tabItem1.style.setProperty('transform', `rotate(${angle}deg)`)
       },
       setSelectedIndex(index : number) {
         if (this.selectedIndex === index) {
@@ -82,6 +97,13 @@
           this.tabList[index].init = true
         }
         this.selectedIndex = index
+      },
+      onPlusClick() {
+        uni.showModal({
+          title: "提示",
+          content: "你点击了 +",
+          showCancel: false
+        })
       }
     }
   }
@@ -95,12 +117,14 @@
 
   .uni-icon {
     font-family: "UniIcon";
-    font-size: 18px;
+    font-size: 16px;
     font-style: normal;
   }
 
-  .custom-tab-bar {
+  .tabs {
     flex: 1;
+    background-color: #fff;
+    overflow: visible;
   }
 
   .tab-view {
@@ -112,14 +136,16 @@
   }
 
   .tab-bar {
-    background-color: #f0f0f0;
-    border-top: 1px solid #dbdbdb;
     flex-direction: row;
     height: 56px;
+    overflow: visible;
   }
 
   .tab-item {
     flex: 1;
+    position: relative;
+    background-color: #1e90ff;
+    overflow: visible;
   }
 
   .tab-item-content {
@@ -128,24 +154,50 @@
   }
 
   .tab-item-icon {
-    color: #555;
+    color: #ccc;
     font-size: 12px;
     text-align: center;
+    margin-bottom: 4px;
   }
 
   .tab-item-text {
-    color: #555;
+    color: #ccc;
     font-size: 12px;
-    margin-top: 4px;
     text-align: center;
   }
 
   .tab-item-text-active {
-    color: #007AFF;
+    color: #fff;
   }
 
-  .tab-item-icon1 {
+  .tab-item-arrow {
     font-size: 30px !important;
     font-weight: bold;
   }
+
+  .concave-image {
+    width: 115px;
+    height: 56px;
+  }
+
+  .btn-plus {
+    position: absolute;
+    left: 23px;
+    width: 70px;
+    height: 70px;
+    border-radius: 50px;
+    background-color: #FE5722;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+    /* margin-left: auto;
+    margin-right: auto; */
+    margin-top: -35px;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+  }
+
+  .btn-plus-text {
+    color: #fff;
+    font-size: 32px;
+  }
 </style>
diff --git a/pages/template/custom-tab-bar2/custom-tab-bar2-tab1.uvue b/pages/template/custom-tab-bar2/custom-tab-bar2-tab1.uvue
deleted file mode 100644
index c34e5afd..00000000
--- a/pages/template/custom-tab-bar2/custom-tab-bar2-tab1.uvue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <list-view ref="listView" class="list" :rebound="false" :scroll-y="true" @scrolltolower="loadData()"
-    @scroll="onScroll">
-    <list-item class="list-item" v-for="(item, index) in dataList" :key="index">
-      <text class="title">{{item.title}}</text>
-    </list-item>
-  </list-view>
-</template>
-
-<script>
-  type ListItem = {
-    title : string
-  }
-
-  export default {
-    data() {
-      return {
-        dataList: [] as ListItem[]
-      }
-    },
-    created() {
-      this.loadData()
-    },
-    methods: {
-      loadData() {
-        let index = this.dataList.length
-        for (let i = 0; i < 10; i++) {
-          this.dataList.push({
-            title: index.toString(),
-          } as ListItem)
-          index++
-        }
-      },
-      onScroll(e : ScrollEvent) {
-        uni.$emit('tabchange', e.detail.scrollTop)
-      },
-      scrollTop(top : number) {
-        (this.$refs["listView"] as Element).setAttribute('scrollTop', top)
-      }
-    }
-  }
-</script>
-
-<style>
-  .list {
-    flex: 1;
-    background-color: #ffffff;
-  }
-
-  .list-item {
-    flex-direction: row;
-    padding: 30px;
-    border-bottom: 1px solid #dbdbdb;
-  }
-
-  .title {
-    font-size: 16px;
-    text-align: center;
-  }
-</style>
\ No newline at end of file
diff --git a/pages/template/custom-tab-bar2/custom-tab-bar2-tab2.uvue b/pages/template/custom-tab-bar2/custom-tab-bar2-tab2.uvue
deleted file mode 100644
index 063e1fba..00000000
--- a/pages/template/custom-tab-bar2/custom-tab-bar2-tab2.uvue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <view class="page">
-    <button type="primary">登录</button>
-  </view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-      }
-    },
-    created() {
-    },
-    methods: {
-    }
-  }
-</script>
-
-<style>
-  .page {
-    padding: 15px;
-  }
-</style>
\ No newline at end of file
diff --git a/pages/template/custom-tab-bar2/custom-tab-bar2.uvue b/pages/template/custom-tab-bar2/custom-tab-bar2.uvue
deleted file mode 100644
index 18451940..00000000
--- a/pages/template/custom-tab-bar2/custom-tab-bar2.uvue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-  <view class="tabs">
-    <view class="tab-view">
-      <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>
-    <view ref="tabbar" class="tab-bar">
-      <view class="tab-item" @click="onTabClick(0)">
-        <view ref="tab-item1" class="tab-item-content">
-          <text class="tab-item-icon uni-icon"
-            :class="selectedIndex==0 ? 'tab-item-text-active' : ''">{{'\ue644'}}</text>
-          <text class="tab-item-text" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
-            列表
-          </text>
-        </view>
-      </view>
-      <view>
-        <image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
-        <view class="btn-plus" @click="onPlusClick">
-          <text class="btn-plus-text">+</text>
-        </view>
-      </view>
-      <view class="tab-item" @click="onTabClick(1)">
-        <view ref="tab-item2" class="tab-item-content">
-          <text class="tab-item-icon uni-icon"
-            :class="selectedIndex==1 ? 'tab-item-text-active' : ''">{{'\ue699'}}</text>
-          <text class="tab-item-text" :class="selectedIndex==1 ? 'tab-item-text-active' : ''">
-            我的
-          </text>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-  import tab1 from './custom-tab-bar2-tab1.uvue';
-  import tab2 from './custom-tab-bar2-tab2.uvue';
-
-  type TabItem = {
-    init : boolean,
-    preload : boolean,
-  }
-
-  export default {
-    components: {
-      tab1,
-      tab2
-    },
-    data() {
-      return {
-        tabList: [
-          {
-            init: false
-          } as TabItem,
-          {
-            init: false
-          } as TabItem,
-        ] as TabItem[],
-        selectedIndex: -1
-      }
-    },
-    onReady() {
-      this.setSelectedIndex(0)
-    },
-    methods: {
-      onTabClick(index : number) {
-        this.setSelectedIndex(index);
-        if (index == 0) {
-          (this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
-        }
-      },
-      onTabPageEvent(top : number) {
-        const tabItem1 = this.$refs["tabs-item1"] as Element
-        const angle = top < 50 ? '0deg' : '180deg'
-        tabItem1.style.setProperty('transform', `rotate(${angle})`)
-      },
-      setSelectedIndex(index : number) {
-        if (this.selectedIndex === index) {
-          return
-        }
-        if (!this.tabList[index].init) {
-          this.tabList[index].init = true
-        }
-        this.selectedIndex = index
-      },
-      onPlusClick() {
-        uni.showModal({
-          title: "提示",
-          content: "你点击了 +",
-          showCancel: false
-        })
-      }
-    }
-  }
-</script>
-
-<style>
-  @font-face {
-    font-family: "UniIcon";
-    src: url('@/static/fonts/uni-icon.ttf');
-  }
-
-  .uni-icon {
-    font-family: "UniIcon";
-    font-size: 16px;
-    font-style: normal;
-  }
-
-  .tabs {
-    flex: 1;
-    background-color: #fff;
-    overflow: visible;
-  }
-
-  .tab-view {
-    flex: 1;
-  }
-
-  .tab-view-item {
-    flex: 1;
-  }
-
-  .tab-bar {
-    flex-direction: row;
-    height: 56px;
-    overflow: visible;
-  }
-
-  .tab-item {
-    flex: 1;
-    position: relative;
-    background-color: #1e90ff;
-    overflow: visible;
-  }
-
-  .tab-item-content {
-    margin: auto;
-  }
-
-  .tab-item-icon {
-    color: #ccc;
-    font-size: 12px;
-    text-align: center;
-    margin-bottom: 4px;
-  }
-
-  .tab-item-text {
-    color: #ccc;
-    font-size: 12px;
-    text-align: center;
-  }
-
-  .tab-item-text-active {
-    color: #fff;
-  }
-
-  .concave-image {
-    width: 115px;
-    height: 56px;
-  }
-
-  .btn-plus {
-    position: absolute;
-    left: 23px;
-    width: 70px;
-    height: 70px;
-    border-radius: 50px;
-    background-color: #FE5722;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-    /* margin-left: auto;
-    margin-right: auto; */
-    margin-top: -35px;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
-  }
-
-  .btn-plus-text {
-    color: #fff;
-    font-size: 32px;
-  }
-</style>
-- 
GitLab