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 () {//动态更新购物车数量
      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的选中和未选中的图标和字体颜色都是根据buId动态配置的
    */
    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);
    },

    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
      wx.switchTab({
        url
      })
    },
  }

}
</script>

导航栏

<template>
  <div class="comp-navbar">
    <!-- 导航栏主体 -->
    <cover-view class="navbar"
                :style="{height: navBarHeight + 'px'}">
      <!-- 状态栏 -->
      <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
        })
      }
    },