优化底部导航组件

src/components/componentscom/tabBar/index.vue

@@ -2,34 +2,37 @@
   <div class="tabBar">
     <div v-if="datas.iconList.length !== 0" class="tabbar">
       <van-tabbar
+      route
         v-model="active"
-        :fixed="false"
         :placeholder="true"
         :border="datas.isShowBorder"
         :active-color="datas.activeColor"
         :inactive-color="datas.inactiveColor"
       >
-        <van-tabbar-item
+        <van-tabbar-item 
           v-for="(item, index) in datas.iconList"
           :key="index"
           :name="item.iconName"
-          :icon="item.iconPic"
           :dot="item.isDot"
-          >{{ item.iconText }}</van-tabbar-item
+          :to="item.http.externalLink"
         >
+          <span>{{ item.iconText }}</span>
+          <template #icon="props">
+            <img :src="props.active ? item.iconPic : item.inactive" />
+          </template>
+        </van-tabbar-item>
       </van-tabbar>
     </div>
 
     <div v-else>
       <van-tabbar
         v-model="datas.Highlight"
-        :fixed="false"
         :placeholder="true"
         :border="datas.isShowBorder"
         :active-color="datas.activeColor"
         :inactive-color="datas.inactiveColor"
       >
-        <van-tabbar-item icon="search" dot name="home">标签</van-tabbar-item>
+        <van-tabbar-item icon="search" name="home">标签</van-tabbar-item>
         <van-tabbar-item icon="home-o">标签</van-tabbar-item>
         <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
         <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
@@ -46,11 +49,11 @@
 export default {
   name: 'tabBar',
   props: {
-    datas: Object,
+    datas: Object
   },
   data() {
     return {
-      // active: 'home',
+      active: 0
     }
   },
 
@@ -71,7 +74,7 @@ export default {
   beforeDestroy() {
     document.querySelector('.phone-container').style.cssText =
       'padding-bottom: 0px'
-  },
+  }
 }
 </script>
 

src/components/headerTop/index.vue

@@ -1,33 +1,40 @@
 <template>
   <!-- 标题 -->
-  <div
-    class="headerTop"
-    style="position: relative"
-    :style="{
-      height: name.titleHeight + 'px',
-    }"
-  >
-    <!-- 左半部分 -->
-    <div @click="pushHome" class="lef" v-if="name.isBack">
-      <van-icon name="arrow-left" />
-    </div>
-    <!-- 标题 -->
+  <div>
     <div
-      class="header-title"
+      class="headerTop"
+      style="position: fixed"
       :style="{
-        height: name.titleHeight + 'px',
-        'line-height': name.titleHeight + 'px',
+        height: name.titleHeight + 'px'
       }"
     >
-      {{ name.name ? name.name : '' }}
-    </div>
-    <div
-      class="rig"
-      @click="$router.push({ name: name.urlname ? name.urlname : 'personal' })"
-      v-if="name.isPerson"
-    >
-      <span v-html="name.subhead ? name.subhead : '个人中心'"></span>
+      <!-- 左半部分 -->
+      <div @click="pushHome" class="lef" v-if="name.isBack">
+        <van-icon name="arrow-left" />
+      </div>
+      <!-- 标题 -->
+      <div
+        class="header-title"
+        :style="{
+          height: name.titleHeight + 'px',
+          'line-height': name.titleHeight + 'px'
+        }"
+      >
+        {{ name.name ? name.name : '' }}
+      </div>
+      <div
+        class="rig"
+        @click="
+          $router.push({ name: name.urlname ? name.urlname : 'personal' })
+        "
+        v-if="name.isPerson"
+      >
+        <span v-html="name.subhead ? name.subhead : '个人中心'"></span>
+      </div>
     </div>
+    <div :style="{
+        height: name.titleHeight + 'px'
+      }"></div>
   </div>
 </template>
 
@@ -35,11 +42,11 @@
 export default {
   name: 'headerTop',
   props: {
-    name: Object,
+    name: Object
   },
   data() {
     return {
-      fanhui: true, //返回按钮是否显示
+      fanhui: true //返回按钮是否显示
     }
   },
 
@@ -70,8 +77,8 @@ export default {
         let shopId = window.localStorage.getItem('shopTemplateId')
         this.$router.push({ path: '/shop', query: { orgId: shopId } })
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -84,7 +91,7 @@ export default {
   background: #fff;
   display: flex;
   box-sizing: border-box;
-  padding: 0 5px;
+  margin-left: -18px;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
@@ -93,25 +100,11 @@ export default {
   z-index: 10;
   /* 左边 */
   .lef {
-    // display: flex;
-    // align-items: center;
-    // height: 100%;
     position: absolute;
     left: 18px;
     top: 50%;
     transform: translateY(-50%);
     /* 图标 */
-    i {
-      padding: 2px;
-      border: 1px solid #dcdcdc;
-      border-radius: 50%;
-      margin-right: 8px;
-      font-size: 14px;
-
-      &::before {
-        color: #dcdcdc;
-      }
-    }
 
     span {
       color: #000;