底部栏样式

custom-tab-bar/index.js

+
 const app = getApp();
 
 console.log(app, "apppppppppp");
@@ -65,7 +66,34 @@ Component({
     ],
     mm:false,
     componentData: {},
-    show: true
+    show: true,
+    mmm : false,
+    mainColor : ''
+  },
+  ready(){
+    if (app.themeColor['--main-color'] != '#ffffff') {
+      this.setData({
+        mainColor: app.themeColor['--main-color']
+      })
+    } else {
+      app.themeColorCallBack = (res) => {
+        this.setData({
+          mainColor: res['--main-color']
+        })
+      }
+    }
+
+    console.log(this.data.themeColor,'themeColor')
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 1
+      });
+    }
+    this.setData({
+      mmm: Math.ceil(app.globalData.footerVal.componentData.list.length / 2 - 1)
+    })
+    console.log(Math.ceil(app.globalData.footerVal.componentData.list.length / 2 - 1), this.data.selected)
+    console.log(this.data.mmm,'ready')
   },
   attached() {
     let that = this;
@@ -78,6 +106,7 @@ Component({
         list: app.globalData.footerVal.componentData.list,
         mm:mm
       });
+
       console.log('777777',Math.ceil(this.data.list.length/2-1),this.data.selected,this.data.componentData['styleSelectionNum'])
     } else {
       console.log(73333381)

custom-tab-bar/index.wxml

 <!--miniprogram/custom-tab-bar/index.wxml-->
-<view  class="tab-bar {{show?'':'hide'}}">
+<view  class="tab-bar {{show?'':'hide'}}" style="--main-color : {{mainColor}}">
 	<!-- <view class="antt ant-daipinglun"></view> -->
 	<!-- <view class="iconfont icon-fenzhi">3</view> -->
 
@@ -7,7 +7,7 @@
 	<view
 	 wx:for="{{list}}"
 	 wx:key="index"
-	 class="tab-bar-item {{(Math.ceil(list.length/2-1)==selected&&componentData['styleSelectionNum']==1)?isItem:''}}"
+	 class="tab-bar-item {{(mmm==index&&componentData['styleSelectionNum']==1)?'isItem':''}}"
 	 data-path="{{item.link}}"
 	 data-index="{{index}}"
 	 bindtap="switchTab"

custom-tab-bar/index.wxss

@@ -1411,6 +1411,16 @@
 .isItem {
   transform: translateY(-30%)
 }
+.isItem .antt{
+        width:50px;
+        height: 50px;
+        background: var(--main-color);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 8rpx solid #fff;
+}
 .icons {
   width: 50px;
   height: 50px;

src/App.vue

@@ -168,6 +168,7 @@ export default {
           themeColor["--main-color"] = val.themeColor.mainColor;
           themeColor["--minor-color"] = val.themeColor.minorColor;
           mpApp.themeColorCallBack(themeColor);
+          mpApp.themeColor = themeColor
           //
           console.log(this.mpApp, "mmmmm74", themeColor);
         }