底部栏显示隐藏

custom-tab-bar/index.js

-
 const app = getApp();
 
 console.log(app, "apppppppppp");
@@ -64,62 +63,23 @@ Component({
         visible: 1
       }
     ],
-    mm:false,
     componentData: {},
     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')
+    showFlag:"up",
   },
   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,
-        mm:mm
+        list: app.globalData.footerVal.componentData.list
       });
-
-      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,
-          // mm:(Math.ceil(params.componentData.list.length/2-1)==that.data.selected&&params.componentData['styleSelectionNum']==1)
+          list: params.componentData.list
         });
-
-        let mm=(Math.ceil(params.componentData.list.length/2-1)==that.data.selected&&params.componentData['styleSelectionNum']==1)
-        console.log('87777777',mm)
       };
     }
 
@@ -129,12 +89,6 @@ 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'}}" style="--main-color : {{mainColor}}">
+<view class="tab-bar {{show?'':'hide'}} {{(componentData.scrollHide) && showFlag=='down'?'down':'up'}}" style="--main-color : {{mainColor}}">
 	<!-- <view class="antt ant-daipinglun"></view> -->
 	<!-- <view class="iconfont icon-fenzhi">3</view> -->
 
@@ -15,8 +15,8 @@
 		<!-- {{index}}{{selected}}--{{Math.ceil(5/2-1)}}--{{mm}} -->
 		<!-- &&componentData['styleSelectionNum']==1 -->
 		<!-- 图标 -->
-		<view >
-			<view  wx:if="{{item.iconType==0||!item.iconType}}">
+		<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>
 			<view

custom-tab-bar/index.wxss

@@ -1378,18 +1378,13 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 51px;
+  height: 48px;
+  background: white;
   display: flex;
   padding-bottom: env(safe-area-inset-bottom);
-  font-size: 10px;
-  width: 100%;
-  bottom: 0;
-  left: 0;
-  background: #f5f5f4;
-  border-top: 1px solid #e2e2e2;
 }
 
-/* .tab-bar-border {
+.tab-bar-border {
   background-color: rgba(0, 0, 0, 0.33);
   position: absolute;
   left: 0;
@@ -1397,7 +1392,7 @@
   width: 100%;
   height: 1px;
   transform: scaleY(0.5);
-} */
+}
 
 .tab-bar-item {
   flex: 1;
@@ -1408,30 +1403,6 @@
   flex-direction: column;
 }
 
-.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;
-  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;
@@ -1441,19 +1412,36 @@
   /* font-size: 10px; */
 }
 
-/* .img-view{
-  display: flex;
-  align-items: center;
-} */
-.img-view image{
-  /* object-fit: contain; */
+.img-view cover-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);
+}

src/pages/home/index.vue

@@ -111,7 +111,8 @@ export default {
         '--main-color':"",
         '--minor-color':"",
       },
-      changeLocation : ''
+      changeLocation : '',
+      beforeScrollTop:0,
     };
   },
   components:{
@@ -251,6 +252,7 @@ export default {
   },
   methods: {
     init(pageList) {
+      
       setTabBarActive.bind(this)(checkTabbarPage('/'));
 
       this.pageInfo = pageList.filter((item) => item.pageCode == 1)[0];
@@ -258,10 +260,27 @@ export default {
       console.log("36", this.pageData);
     },
     scrolls(el){
+      this.setFooterShow(el);
       if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){
         this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
       }
     },
+    setFooterShow(el){
+      let afterScrollTop = el.scrollTop;
+      let delta = afterScrollTop - this.beforeScrollTop;
+      let {showFlag} = this.$mp.page.getTabBar().data;
+      if(
+        delta === 0 ||
+        afterScrollTop < 0 ||
+        this.beforeScrollTop < 0 || 
+        (delta>0 && showFlag=='down') ||
+        (delta<0 && showFlag=='up')
+        ){
+         return;
+      }
+      this.$mp.page.getTabBar().setData({'showFlag':delta>0?'down':'up'})
+      this.beforeScrollTop = afterScrollTop;
+    },
     scrolltolower(){
       console.log("scrolltolower")
     }