cxw-010203

app.js

@@ -1,79 +1,6 @@
 //app.js
 App({
-  onLaunch: function () {
-    this.hidetabbar();
-    this.getSystemInfo();
-  },
-  //自己对wx.hideTabBar的一个封装
-  hidetabbar() {
-    wx.hideTabBar({
-      fail: function() {
-        setTimeout(function() { // 做了个延时重试一次，作为保底。
-          wx.hideTabBar()
-        }, 500)
-      }
-    });
-  },
-  getSystemInfo: function() {
-    let t = this;
-    wx.getSystemInfo({
-      success: function(res) {
-        t.globalData.systemInfo = res;
-      }
-    });
-  },
-  editTabbar: function() {
-    let tabbar = this.globalData.tabBar;
-    let currentPages = getCurrentPages();
-    let _this = currentPages[currentPages.length - 1];
-    let pagePath = _this.route;
-    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
-    for (let i in tabbar.list) {
-      tabbar.list[i].selected = false;
-      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
-    }
-    _this.setData({
-      tabbar: tabbar
-    });
-  },
   globalData: {
-    systemInfo: null,//客户端设备信息
-    tabBar: {
-      "color": "#727272",
-      "selectedColor": "#F46368",
-      "backgroundColor": "#ffffff",
-      "list": [
-        {
-          "pagePath": "pages/index/index",
-          "iconPath": "/components/tabbarComponent/icons/home.png",
-          "selectedIconPath": "/components/tabbarComponent/icons/homeActive.png",
-          "text": "首页"
-        },
-        {
-          "pagePath": "pages/insight/index",
-          "iconPath": "/components/tabbarComponent/icons/insight.png",
-          "selectedIconPath": "/components/tabbarComponent/icons/insightActive.png",
-          "text": "洞察"
-        },
-        {
-          "pagePath": "pages/brandSearch/index",
-          "iconPath": "/components/tabbarComponent/icons/appSearch.png",
-          "selectedIconPath": "/components/tabbarComponent/icons/appSearchActive.png",
-          "text": "品牌搜索"
-        },
-        {
-          "pagePath": "pages/varComm/index",
-          "iconPath": "/components/tabbarComponent/icons/varComm.png",
-          "selectedIconPath": "/components/tabbarComponent/icons/varCommActive.png",
-          "text": "对比"
-        },
-        {
-          "pagePath": "pages/mine/index",
-          "iconPath": "/components/tabbarComponent/icons/mine.png",
-          "selectedIconPath": "/components/tabbarComponent/icons/mineActive.png",
-          "text": "我的"
-        }
-      ]
-    }
+    
   }
 })

app.json

@@ -15,6 +15,7 @@
     "navigationBarTextStyle": "black"
   },
   "tabBar": {
+    "custom": true,
     "list": [{
         "pagePath": "pages/index/index",
         "iconPath": "/components/tabbarComponent/icons/home.png",
@@ -49,10 +50,11 @@
   },
   "sitemapLocation": "sitemap.json",
   "usingComponents": {
-    "ec-canvas": "../ec-canvas/ec-canvas",
+    "ec-canvas": "/ec-canvas/ec-canvas",
     "van-button": "@vant/weapp/button/index",
     "van-tabbar": "@vant/weapp/tabbar/index",
-    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
+    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
+    "tabbar": "/custom-tab-bar/index"
   }
   
 }

components/tabbarComponent/tabbar.js

@@ -1,64 +0,0 @@
-// tabBarComponent/tabBar.js
-const app = getApp();
-Component({
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-    tabbar: {
-      type: Object,
-      value: {
-        "backgroundColor": "#ffffff",
-        "color": "#979795",
-        "selectedColor": "#1c1c1b",
-        "list": [
-          {
-            "pagePath": "pages/index/index",
-            "text": "首页",
-            "iconPath": "icons/home.png",
-            "selectedIconPath": "icons/homeActive.png",
-          },
-          {
-            "pagePath": "pages/insight/index",
-            "text": "洞查",
-            "iconPath": "icons/insight.png",
-            "selectedIconPath": "icons/insightActive.png",
-          },
-          {
-            "pagePath": "pages/brandSearch/index",
-            "text": "导航",
-            "iconPath": "icons/appSearch.png",
-            "selectedIconPath": "icons/appSearchActive.png",
-            "isSpecial": true,
-          },
-          {
-            "pagePath": "pages/varComm/index",
-            "text": "对比",
-            "iconPath": "icons/varComm.png",
-            "selectedIconPath": "icons/varCommActive.png",
-          },
-          {
-            "pagePath": "pages/mine/index",
-            "text": "我的",
-            "iconPath": "icons/mine.png",
-            "selectedIconPath": "icons/mineActive.png",
-          }
-        ]
-      }
-    }
-  },
-
-  /**
-   * 组件的初始数据
-   */
-  data: {
-    isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false
-  },
-
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-
-  }
-})

components/tabbarComponent/tabbar.json

@@ -1,4 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {}
-}

components/tabbarComponent/tabbar.wxml

@@ -1,13 +0,0 @@
-<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
-  <block wx:for="{{tabbar.list}}" wx:key="index">
-    <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate">
-      <view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
-      <image class='special-text-wrapper'></image>
-      <text>{{item.text}}</text>
-    </navigator>
-    <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
-      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
-      <text>{{item.text}}</text>
-    </navigator>
-  </block>
-</view>

components/tabbarComponent/tabbar.wxss

@@ -1,63 +0,0 @@
-.tabbar_box{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 999;
-    width: 100%;
-    height: 98rpx;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-}
-.tabbar_box.iphoneX-height{
-    padding-bottom: 66rpx;
-}
-.middle-wrapper{
-  position: absolute;
-  right: 310rpx;
-  bottom: 0;
-  background-color: #fff;
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  border-top: 2rpx solid #f2f2f3;
-}
-.middle-wrapper.iphoneX-height{
-  bottom: 66rpx;
-}
-.tabbar_nav{
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 20rpx;
-    height: 100%;
-    position: relative;
-}
-.tabbar_icon{
-    width: 56rpx;
-    height: 56rpx;
-}
-.special-wrapper{
-  position: absolute;
-  left: 77rpx;
-  top: -36rpx;
-  width: 96rpx;
-  height: 96rpx;
-  border-radius: 50%;
-  border-top: 2rpx solid #f2f2f3;
-  background-color: #fff;
-  text-align: center;
-  box-sizing: border-box;
-  padding: 6rpx;
-}
-.special-wrapper .tabbar_icon{
-    width: 84rpx;
-    height: 84rpx;
-}
-.special-text-wrapper{
-  width: 56rpx;
-  height: 56rpx;
-}

custom-tab-bar/index.js

@@ -0,0 +1,52 @@
+
+Component({
+    data: {
+      selected: 0,//当前选中的tab下标
+      color: "#1E1E1E",
+      selectedColor: "#646464",//tabbar选中字体颜色
+          list: [{
+            "pagePath": "pages/index/index",
+            "iconPath": "/components/tabbarComponent/icons/home.png",
+            "selectedIconPath": "/components/tabbarComponent/icons/homeActive.png",
+            "text": "首页"
+          },
+          {
+            "pagePath": "pages/insight/index",
+            "iconPath": "/components/tabbarComponent/icons/insight.png",
+            "selectedIconPath": "/components/tabbarComponent/icons/insightActive.png",
+            "text": "洞察"
+          },
+          {
+            "pagePath": "pages/brandSearch/index",
+            "iconPath": "/components/tabbarComponent/icons/appSearch.png",
+            "selectedIconPath": "/components/tabbarComponent/icons/appSearchActive.png",
+            "text": "品牌搜索"
+          },
+          {
+            "pagePath": "pages/varComm/index",
+            "iconPath": "/components/tabbarComponent/icons/varComm.png",
+            "selectedIconPath": "/components/tabbarComponent/icons/varCommActive.png",
+            "text": "对比"
+          },
+          {
+            "pagePath": "pages/mine/index",
+            "iconPath": "/components/tabbarComponent/icons/mine.png",
+            "selectedIconPath": "/components/tabbarComponent/icons/mineActive.png",
+            "text": "我的"
+          }
+        ],//tabbar循环数据集
+    },
+    attached() {
+    },
+    methods: {
+      switchTab(e) {
+        const data = e.currentTarget.dataset;
+        const url = data.path
+              this.setData({
+                selected: data.index 
+              })
+        wx.switchTab({url})
+      }
+    },
+  })
+  

custom-tab-bar/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true
+}
+  

custom-tab-bar/index.wxml

@@ -0,0 +1,7 @@
+<view class="tab-bar">
+    <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="{{item.diyClass}}"  mode="aspectFit"/>
+      <view style="color: {{selected === index ? selectedColor : color}}" class="{{item.diyClass}}">{{item.text}}</view>
+    </view>
+  </view>
+  

custom-tab-bar/index.wxss

@@ -0,0 +1,69 @@
+
+
+/*重新样式*/
+.tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05);
+    box-sizing: content-box;
+  }
+  
+  .tab-bar-border {
+    background-color: rgba(0, 0, 0, 0.33);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleY(0.5);
+  }
+  
+  .tab-bar-item {
+    flex: auto;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background: #fff;
+    height: 120rpx;
+  }
+  
+  .tab-bar-item.diy {
+    margin-top: 0!important;
+    background: transparent;
+    position: relative;
+    flex: inherit;
+    width: 134rpx;
+  }
+  
+  .tab-bar-item image {
+    width: 48rpx;
+    height: 48rpx;
+    overflow: initial;
+  }
+  
+  .tab-bar-item view {
+    font-size: 24rpx;
+  }
+  
+  .tab-bar-item image.diy {
+    position: absolute;
+    width: 134rpx;
+    height: 140rpx;
+    bottom: 25.6%;
+    z-index: 100;
+  }
+  
+  .tab-bar-item view.diy {
+    margin-top: 90rpx;
+    background: #fff;
+    width: 100%;
+    height: 100%;
+    padding-top: 58rpx;
+    z-index: 99;
+  }
+  

pages/index/index.json

@@ -1,6 +1,5 @@
 {
   "usingComponents": {
-    "tabbar": "../../components/tabbarComponent/tabbar"
   },
   "backgroundTextStyle": "light",
   "navigationBarBackgroundColor": "#006BFF",

pages/index/index.wxml

@@ -14,5 +14,5 @@
       </view>
     </view>
   </view>
-  <tabbar tabbar="{{tabbar}}"></tabbar>
+  <tabbar />
 </view>