底部栏

custom-tab-bar/index.js

+
 const app = getApp();
 
 console.log(app, "apppppppppp");
@@ -63,23 +64,62 @@ Component({
         visible: 1
       }
     ],
+    mm:false,
     componentData: {},
     show: true,
-    showFlag:"up",
+    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;
     if (app.globalData.footerVal) {
+      let mm=(Math.ceil(app.globalData.footerVal.componentData.list.length/2-1)==that.data.selected&&app.globalData.footerVal.componentData['styleSelectionNum']==1)
+      
+      console.log(733333,mm)
       that.setData({
         componentData: app.globalData.footerVal.componentData,
-        list: app.globalData.footerVal.componentData.list
+        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)
       app.footerCallBack = function(params) {
+        console.log('back')
         that.setData({
           componentData: params.componentData,
-          list: params.componentData.list
+          list: params.componentData.list,
+          // mm:(Math.ceil(params.componentData.list.length/2-1)==that.data.selected&&params.componentData['styleSelectionNum']==1)
         });
+
+        let mm=(Math.ceil(params.componentData.list.length/2-1)==that.data.selected&&params.componentData['styleSelectionNum']==1)
+        console.log('87777777',mm)
       };
     }
 
@@ -89,6 +129,12 @@ Component({
     app.webviewCallBack = function(state, params) {
       console.log("webview变化", state, params);
     };
+
+    // 
+    this.setData({
+      mm:(Math.ceil(this.data.list.length/2-1)==this.data.selected&&this.data.componentData['styleSelectionNum']==1)
+    })
+    
   },
   methods: {
     init() {},

custom-tab-bar/index.wxml

 <!--miniprogram/custom-tab-bar/index.wxml-->
-<view class="tab-bar {{show?'':'hide'}} {{(componentData.scrollHide) && showFlag=='down'?'down':'up'}}" style="--main-color : {{mainColor}}">
+<view  class="tab-bar {{show?'':'hide'}}" style="--main-color : {{mainColor}}">
 	<!-- <view class="antt ant-daipinglun"></view> -->
 	<!-- <view class="iconfont icon-fenzhi">3</view> -->
 
-	<!-- <view class="tab-bar-border"></view> -->
+	<view class="tab-bar-border"></view>
 	<view
 	 wx:for="{{list}}"
 	 wx:key="index"
@@ -15,9 +15,10 @@
 		<!-- {{index}}{{selected}}--{{Math.ceil(5/2-1)}}--{{mm}} -->
 		<!-- &&componentData['styleSelectionNum']==1 -->
 		<!-- 图标 -->
-		<view>
+		<view class="item">
+		<view >
 			<view  wx:if="{{item.iconType==0||!item.iconType}}">
-				<view class="antt {{item.icon}}" style="font-size:{{(index==selected?componentData.selectionIconSize*2:componentData.defaultIconSize*2)+'rpx'}};color:{{index==selected?componentData.selectIconColor:componentData.defaultIconColor}}"></view>
+				<view class="antt {{item.icon}}" style="font-size:{{componentData.defaultIcon==1 ? '36rpx' : (componentData.defaultIconSize*2 + 'rpx')}};color:{{index==selected?componentData.selectIconColor:componentData.defaultIconColor}}"></view>
 			</view>
 			<view
 			 wx:elif="{{item.iconType==1}}"
@@ -28,8 +29,9 @@
 			</view>
 		</view>
 		<!-- 名称 -->
-		<view  wx:if="{{componentData['contentFormNum']!=3}}" class="text" style="color: {{selected === index ? componentData.selectTextColor  : componentData.defaultTextColor}};font-size:{{selected === index ? componentData.selectionTextNum*2 : componentData.defaultTextNum*2}}rpx">
+		<view class="text" style="color: {{selected === index ? componentData.selectTextColor  : componentData.defaultTextColor}};font-size:{{selected === index ? componentData.selectionTextNum*2 : componentData.defaultTextNum*2}}rpx">
 			{{item.title}}</view>
 		</view>
+	</view>
 </view>
 

custom-tab-bar/index.wxss

@@ -1378,10 +1378,15 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 48px;
-  background: white;
+  height: 102rpx;
   display: flex;
   padding-bottom: env(safe-area-inset-bottom);
+  font-size: 20rpx;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  background: #f5f5f4;
+  /* border-top: 1px solid #e2e2e2; */
 }
 
 .tab-bar-border {
@@ -1398,11 +1403,46 @@
   flex: 1;
   text-align: center;
   display: flex;
-  justify-content: center;
+  justify-content:center;
   align-items: center;
   flex-direction: column;
 }
 
+.tab-bar-item .item{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  height: 100%;
+}
+
+.isItem {
+  transform: translateY(-40%)
+}
+.isItem .antt{
+        width:100rpx;
+        height: 100rpx;
+        background: var(--main-color);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 8rpx solid #fff;
+        box-sizing: border-box;
+        color: white;
+}
+.icons {
+  width: 100rpx;
+  height: 100rpx;
+  background: var(--main-color);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 4px solid #fff;
+}
+
 .tab-bar-item cover-image {
   width: 27px;
   height: 27px;
@@ -1412,36 +1452,19 @@
   /* font-size: 10px; */
 }
 
-.img-view cover-image{
-  object-fit: contain;
+/* .img-view{
+  display: flex;
+  align-items: center;
+} */
+.img-view image{
+  /* object-fit: contain; */
   width: 100%;
   height: 100%;
 }
+.text{
+  margin-top: 4rpx;
+}
 
 .hide{
   display: none;
 }
-.down{
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-  -moz-transition: all 0.3s;
-  -ms-transition: all 0.3s;
-  -o-transition: all 0.3s;
-  transform: translateY(150px);
-  -webkit-transform: translateY(150px);
-  -moz-transform: translateY(150px);
-  -ms-transform: translateY(150px);
-  -o-transform: translateY(150px);
-}
-.up{
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-  -moz-transition: all 0.3s;
-  -ms-transition: all 0.3s;
-  -o-transition: all 0.3s;
-  transform: translateY(0);
-  -webkit-transform: translateY(0);
-  -moz-transform: translateY(0);
-  -ms-transform: translateY(0);
-  -o-transform: translateY(0);
-}