tabBar

<template>
  <div class="tabbar-wrap"
       :style="{paddingBottom:tabBarHeight}">
    <!-- 適配蘋果手機嘉抓，底部安全距離 -->
    <ul>
      <li class="tabbar-item"
          v-for="(item, index) in navList"
          :key="index"
          @click="selectNavItem(index, item.pagePath)"
          :class="item.isSpecial ? 'wrapSpecial':''">
        <!-- 購物車小紅點 -->
        <!-- 未選中樣式 -->
        <p class="tabbar-icon"
           :class="(index==1&&isShowDots>0)? 'showDot-box':''">
          <span class="showDot"
                v-if="index==1&&isShowDots>0">{{isShowDots>99? '99+' : isShowDots}}</span>
          <img alt="tabbar-icon"
               mode="aspectFill"
               :src="selectNavIndex == index? item.selectedIconPath : item.iconPath"
               :class="item.isSpecial ? 'imgSpecial':''">
        </p>
        <!-- 選中樣式-->
        <p class="tabbar-text active-tabbar"
           :style="{color:selectedColor, fontWeight: 550}"
           v-if="selectNavIndex == index">{{item.text}}</p>
        <p class="tabbar-text"
           :style="{color:colors}"
           v-else>{{item.text}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['selectNavIndex', 'isShowDots'],
  data () {
    return {
      tabBarHeight: 0,
      colors: "#666",
      selectedColor: "#000",
      navList: []
    }
  },
  watch: {
    isShowDots () {//動態(tài)更新購物車數(shù)量
      this.isShowDots = this.isShowDots
    }
  },

  created () {
    let that = this
    that.tabBarHeight = 0
    that.colors = that.globalData.tabbarColor//全局tabBar未選中字體顏色
    that.selectedColor = that.globalData.tabbarActiveColor//全局tabBar選中時字體顏色
    this.buId = parseInt(this.globalData.buId)//buid
    /* 
      tabBar的選中和未選中的圖標和字體顏色都是根據(jù)buId動態(tài)配置的
    */
    this.navList = [
      {
        pagePath: "/pages/home/main",
        iconPath: "/static/images/home-icon.png",
        selectedIconPath: "/static/module" + that.buId + "/tabBar-home-active.png",
        text: "首頁"
      },
      {
        pagePath: "/pages/cart/main",
        iconPath: "/static/images/cat-icon.png",
        selectedIconPath: "/static/module" + that.buId + "/tabBar-cat-active.png",
        text: "購物車"
      },
      {
        pagePath: "/pages/personal/main",
        iconPath: "/static/images/person-icon.png",
        selectedIconPath: "/static/module" + that.buId + "/tabBar-person-active.png",
        text: "我的"
      }
    ],

      wx.getSystemInfo({
        success: res => {
          // 獲取手機的底部安全距離
          that.tabBarHeight = 0
          that.tabBarHeight = res.screenHeight - res.safeArea.bottom + 'px';
        }
      })
  },
  methods: {
    /**
     * 點擊導航欄
     */
    selectNavItem (index, pagePath) {
      if (index === this.selectNavIndex) {
        return false;
      }
      this.bindNavigateTo(pagePath);
    },

    /**
     * 路由跳轉(zhuǎn)
     */
    bindNavigateTo (url) {
      wx.switchTab({
        url
      })
    },
  }

}
</script>

導航欄

<template>
  <div class="comp-navbar">
    <!-- 導航欄主體 -->
    <cover-view class="navbar"
                :style="{height: navBarHeight + 'px'}">
      <!-- 狀態(tài)欄 -->
      <cover-view class="nav-statusbar"
                  :style="{height: statusBarHeight + 'px'}"></cover-view>
      <!-- 標題欄 -->
      <cover-view class="nav-titlebar"
                  :style="{height: titleBarHeight + 'px' }">
        <!-- home及后退鍵 -->
        <cover-view class="bar-options">
          <cover-image class="nav-icon"
                       mode="aspectFill"
                       @click="backClick"
                       src="/static/images/arrow-left.png"></cover-image>
        </cover-view>
        <!-- 導購信息 -->
        <cover-view class="guide-box"
                    v-if="guideInfo.name">
          <cover-image mode="aspectFill"
                       class="guide-img"
                       style="width: 29px;height: 29px;"
                       :src="guideInfo.idPic?guideInfo.idPic:guideInfo.pic"></cover-image>
          <cover-view class="guide-p">來自{{guideInfo.name}}的推薦</cover-view>
        </cover-view>
        
      </cover-view>
    </cover-view>
  </div>
</template>


 //適配蘋果手機安全距離
  beforeMount () {
    const self = this;
    wx.getSystemInfo({
      success (system) {
        self.statusBarHeight = system.statusBarHeight;
        self.titleBarHeight = 48;
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      }
    });
  },

    backClick () {
    // 如果是分享進來的沒有歷史路由就返回首頁,否則就返回上一頁
      if (getCurrentPages().length == 1) {
        wx.switchTab({
          url: this.homePath
        })
      } else {
        wx.navigateBack({
          delta: 1
        })
      }
    },