commit

custom-tab-bar/index.js

@@ -1,4 +1,3 @@
-
 Component({
   data: {
     selected: '',

custom-tab-bar/index.wxml

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

custom-tab-bar/index.wxss

@@ -3,19 +3,12 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 48px;
   background: #fff;
   display: flex;
-  padding-bottom: env(safe-area-inset-bottom);
-}
-
-.tab-bar-border {
-  background: rgba(203, 203, 203, 0.16);
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 1px;
+  padding-top:5px;
+  padding-bottom: calc(5px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(5px + env(safe-area-inset-bottom));
+  box-shadow: 0px -3px 6px rgba(203, 203, 203, 0.16);
 }
 
 .tab-bar-item {
@@ -27,12 +20,12 @@
   flex-direction: column;
 }
 
-.tab-bar-item cover-image {
+.tab-bar-item .icon {
   width: 22px;
   height: 22px;
 }
 
-.tab-bar-item cover-view {
+.tab-bar-item .text {
   font-size: 10px;
   margin-top:3px;
 }

style/common.scss

@@ -4,9 +4,11 @@ page{
     font-size: $global-font-size-base;
     color: $global-text-color;
     width: 100%;
-    min-height: calc(100% - calc(48px + env(safe-area-inset-bottom)));
+    min-height: calc(100% - calc(50px + constant(safe-area-inset-bottom)));
+    min-height: calc(100% - calc(50px + env(safe-area-inset-bottom)));
     background-color: $global-bg-color;
-    padding-bottom: calc(48px + env(safe-area-inset-bottom));
+    padding-bottom: calc(50px + constant(safe-area-inset-bottom));
+    padding-bottom: calc(50px + env(safe-area-inset-bottom));
 }
 view{
     box-sizing: border-box;