From e958fde6f0f68f1d35d9f314562196c9040ce90f Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Mon, 18 Sep 2023 19:02:22 +0800
Subject: [PATCH] =?UTF-8?q?custom-tab-bar:=20=E5=87=B9=E6=A7=BD=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=9B=BE=E7=89=87=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-tab-bar2/custom-tab-bar2.uvue      |  56 ++++--------------
 static/template/custom-tab-bar2/concave.png   | Bin 0 -> 1088 bytes
 2 files changed, 12 insertions(+), 44 deletions(-)
 create mode 100644 static/template/custom-tab-bar2/concave.png

diff --git a/pages/template/custom-tab-bar2/custom-tab-bar2.uvue b/pages/template/custom-tab-bar2/custom-tab-bar2.uvue
index b46f161e..762bb2c9 100644
--- a/pages/template/custom-tab-bar2/custom-tab-bar2.uvue
+++ b/pages/template/custom-tab-bar2/custom-tab-bar2.uvue
@@ -14,7 +14,8 @@
           </text>
         </view>
       </view>
-      <view class="tab-item">
+      <view>
+        <image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
         <view class="btn-plus">
           <text class="btn-plus-text">+</text>
         </view>
@@ -56,18 +57,11 @@
             init: false
           } as TabItem,
         ] as TabItem[],
-        selectedIndex: -1,
-        $tabBarNode: null as null | Element,
-        $tabBarWidth: 0,
-        $drawContext: null as null | DrawableContext,
+        selectedIndex: -1
       }
     },
     onReady() {
       this.setSelectedIndex(0)
-      this.$tabBarNode = this.$refs['tabbar'] as Element
-      this.$tabBarWidth = this.$tabBarNode?.offsetWidth as number
-      this.$drawContext = this.$tabBarNode!.getDrawableContext()
-      this._renderTabbar()
     },
     methods: {
       onTabClick(index : number) {
@@ -89,40 +83,6 @@
           this.tabList[index].init = true
         }
         this.selectedIndex = index
-      },
-      _renderTabbar() {
-        const ctx = this.$drawContext!
-
-        ctx.reset()
-
-        const plus_radius = 40
-        const plus_offset = 8
-        const center = this.$tabBarWidth / 2
-        const plus_x1 = center - plus_radius - plus_offset
-        const plus_x2 = center + plus_radius + plus_offset
-        const center_x = center
-        const center_y = plus_radius
-
-        const control_o = 15
-        const control_x = 4.8
-        const control_y = 4.4
-
-        ctx.fillStyle = "dodgerblue"
-
-        ctx.beginPath()
-        ctx.moveTo(0, 0)
-        ctx.lineTo(plus_x1, 0)
-        ctx.bezierCurveTo(plus_x1 + control_o, 0, plus_x1 + control_x, center_y - control_y, center, center_y)
-        ctx.bezierCurveTo(plus_x2 - control_x, center_y - control_y, plus_x2 - control_o, 0, plus_x2, 0)
-        ctx.lineTo(plus_x2, 0)
-        ctx.lineTo(this.$tabBarWidth, 0)
-        ctx.lineTo(this.$tabBarWidth, 52)
-        ctx.lineTo(0, 52)
-        ctx.lineTo(0, 0)
-        ctx.stroke()
-        ctx.fill()
-
-        ctx.update()
       }
     }
   }
@@ -163,6 +123,7 @@
   .tab-item {
     flex: 1;
     position: relative;
+    background-color: #1e90ff;
     overflow: visible;
   }
 
@@ -187,7 +148,14 @@
     color: #fff;
   }
 
+  .concave-image {
+    width: 115px;
+    height: 56px;
+  }
+
   .btn-plus {
+    position: absolute;
+    left: 23px;
     width: 70px;
     height: 70px;
     border-radius: 50px;
@@ -205,4 +173,4 @@
     color: #fff;
     font-size: 32px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/static/template/custom-tab-bar2/concave.png b/static/template/custom-tab-bar2/concave.png
new file mode 100644
index 0000000000000000000000000000000000000000..eab332ffdcba14fbda3f20d98b037bbb04a1c4aa
GIT binary patch
literal 1088
zcmcgq{ZkVJ0G%i)G`z&DAU>?1l9(x9A(X(_7z4t=7!I`p-B5NQ37d#66^w`>-!{+j
zjR?aD7K}v*0VW?qzGciH4vm8Y#+S04K<I1z6TQ3l-o3l`)4P|(2&9=9n;R1d1QWV1
zC0OqQJzckL)~nWn_PO57_*6EZ85_w@h=}77yg0GPxx48x5huC9+z3wM86{U=+C*Ul
zgi!6o*dxaKx!9e9_j2Hr57$EEb;CIy+&YYC;9mic5;#cUC_(QuC^xaTf#EsiDsiF~
zSMKAZYtZO0x`5}anA5?#44IwScm-h#STc+)!2UW86e6h&;lIGI0=jjutKn0Qw03+}
z0NXrNtMT(=)TlA9!>ksHF)Y0RzY)u;s8YeL2+3{uAP-Z|p<PF$9Jd}pyM_mUBdQ)Z
zdNDYIxZjZ9hoM>6<e_8$1$|gqLs&Ip8&E!kmL~|5;>$|(Oyg23uJ_=i9Kp9SzKA;`
zm|j6qKMt1QuSKXea4A6X0LlhIE60o$S33~j2>B?;Ww`$o^jjF1L5>ogld#T)RW|hK
z<FS+Uqet_D1DXHj{|N*!Gc1HaFfgZ6yh6^6&Z`eI#~5!IhKJ>5xWD%3!cvFaCVRV)
zbEyq~XtUAkGA82hauct5mygRd9EZu3iqyJ^Q`SyLCa>i5HN_Sdd|`dBTF~KU6`=Ti
z)xxEM*pT+%YiD(KlWPXGTfBoz^(j(!HAPi%$O){cdxu+(iN>iHnfuEx^;&u_Gb3tv
zK3j>aGT#Iq)xFX)=$W_7%~&EjkugJ*^4K@cZDn0i-ti@}ouk7>KZw+lf#N69KP1Bu
zV#(>DWS5jMyCPoD#O2Bl>!tJx(USQ<;<u_)^I=DYD5G_Twyc^JdOCUZ9)A7tc4=n1
znQ&Kr(!e1GgKOK>AF$Cctvup++uv-#_~9lYOOcz!@<<uCl2+PXcqy7I{a7YD6+|v>
z)v%gX$K!?RF$Xm-e7<81_7?0L{K@~^qWX}ayXseat=&}WdR6V-bv04mNit;k?=;Pz
z)b023e921i`Nq91dg+s02D0`&Z|z&vrDq*bJ8oldxmM<O$4E{(zmSNd`3+l1$#iC6
zA^q*NglGSF=suk?;f@)a`Z4`$NMFrc_7Jt9mz!yIS!dG|?$#YM@MBqqHYkMbO#Tw*
zT}thr^#Pn_Ux$Fkxkhn}BvN-KR&rKZUP@F64DF}lqQ~Nt1_DzW=^k0}J*nBD%j*U&
z<*4Pzn>FWK9$J)^gen<n5_2a(ea(mp^!An?cR0VgSk|)T9m44p!;xUJqEG)$0-YL2
JsUe3a{|osnjmiK3

literal 0
HcmV?d00001

-- 
GitLab