tab.vue

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-24 12:34:06
 * @LastEditTime: 2019-10-15 13:55:04
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div id="tabBar" style="height: 100%;width:100%;">
    <transition>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>
      </keep-alive>
    </transition>
    <transition>
      <router-view v-if="!$route.meta.keepAlive"/>
    </transition>
    <tabbar slot="bottom" class="vux-tabbar" icon-class="vux-center">
      <tabbar-item :link="{path:'/tab/home-page'}" :selected="$route.path === '/' || $route.path==='/tab/home-page'">
        <img slot="icon-active" src="../assets/image/tab/home@2x.png">
        <img slot="icon" src="../assets/image/tab/n_home@2x.png">
        <span slot="label">主页</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/tab/query-home'}" :selected="$route.path === '/tab/query-home'">
        <img slot="icon-active" src="../assets/image/tab/product@2x.png">
        <img slot="icon" src="../assets/image/tab/n_product@2x.png">
        <span slot="label">产品中心</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/tab/message-center'}" :selected="$route.path === '/tab/message-center'">
        <img slot="icon-active" src="../assets/image/tab/message@2x.png">
        <img slot="icon" src="../assets/image/tab/n_message@2x.png">
        <span slot="label">消息</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/tab/function-center'}" :selected="$route.path === '/tab/function-center'">
        <img slot="icon-active" src="../assets/image/tab/function@2x.png">
        <img slot="icon" src="../assets/image/tab/n_function@2x.png">
        <span slot="label">业务办理</span>
      </tabbar-item>
      <tabbar-item :selected="$route.path === '/tab/my-info'" @click.native="tabClick">
        <img slot="icon-active" src="../assets/image/tab/my@2x.png">
        <img slot="icon" src="../assets/image/tab/n_my@2x.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
    <!--</view-box>-->
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      pathList: [],
      transitionName: '',
    }
  },
  watch: { // 监听路由变化
    $route (to, from) {
      if (this.pathList.includes(to.path)) {
        const index = (this.pathList.findIndex(() => {
          return from.path
        }))
        this.pathList.splice(index, 1)
        this.$router.isBack = 1
      } else {
        this.pathList.push(to.path)
        this.$router.isBack = 2
      }
      if (to.path === '/tab/home-page' || to.path === '/tab/my-info' || to.path === '/tab/message-center' || from.path === '/tab/home-page' || from.path === '/tab/my-info' || from.path === '/tab/message-center') {
        this.$router.isBack = 3
        this.pathList = []
      }
      let isBack = this.$router.isBack
      if (isBack === 3) {
        this.transitionName = ''
      } else if (isBack === 2) {
        this.transitionName = 'router-slide-left'
      } else if (isBack === 1) {
        this.transitionName = 'router-slide-right'
      }
      this.$router.isBack = 2
    },
  },
  methods: {
    tabClick () {
      let vm = this
      if (!window.localStorage.getItem('password')) {
        hlsPopup.showConfirm({
          title: '提示',
          content: `请先登录！`,
          onConfirm: data => {
            if (data) {
              vm.$router.push('/login')
            } else {
            }
          },
        })
      } else {
        vm.$router.push('/tab/my-info')
      }
    },

  },
}

</script>
<style lang="less">
  #tabBar {

    .weui-tabbar {
      background-color: #ffffff;
    }

    .weui-tab__panel {
      padding-bottom: 0px !important;
    }
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
      color: @headerColor;
    }
    .weui-tabbar__item .weui-tabbar__label{
      color: #4A4A4A;
    }
    .weui-tab {
      position: fixed;
      height: 100%;
      bottom: 0;
      width: 100%;

      .vux-tabbar {
        .weui-tabbar__item {
          p {
            font-size: 24px;
          }

          img {
            width: 44px;
            height: 44px;
          }
        }
      }
    }
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .weui-tabbar {
        padding-bottom: 34px;
      }
    }
  }

  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .weui-tabbar {
        padding-bottom: 34px;
      }
    }
  }
</style>