tab.vue 3.53 KB
<!--
 * @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/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/my-info'}" :selected="$route.path === '/tab/my-info'">
        <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 = true
        } else {
          this.pathList.push(to.path)
          this.$router.isBack = false
        }
        if (to.path === '/tab/home-page') {
          this.$router.isBack = true
          this.pathList = []
        }
        let isBack = this.$router.isBack
        if (isBack) {
          this.transitionName = 'router-slide-right'
        } else {
          this.transitionName = 'router-slide-left'
        }
        this.$router.isBack = false
      },
    },
    methods: {
      tabClick() {
        // console.log('click');
      },

    },
  }

</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>