tab.vue 3.7 KB
Newer Older
786817560's avatar
786817560 committed
1 2 3 4 5 6 7
<!--
 * @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
 -->
李晓兵's avatar
李晓兵 committed
8
<template>
李晓兵's avatar
李晓兵 committed
9
  <div id="tabBar" style="height: 100%;width:100%;">
李晓兵's avatar
李晓兵 committed
10 11
    <transition>
      <keep-alive>
JingChao's avatar
JingChao committed
12
        <router-view v-if="$route.meta.keepAlive"/>
李晓兵's avatar
李晓兵 committed
13 14 15
      </keep-alive>
    </transition>
    <transition>
JingChao's avatar
JingChao committed
16
      <router-view v-if="!$route.meta.keepAlive"/>
李晓兵's avatar
李晓兵 committed
17
    </transition>
JingChao's avatar
JingChao committed
18
    <tabbar slot="bottom" class="vux-tabbar" icon-class="vux-center">
786817560's avatar
786817560 committed
19
      <tabbar-item :link="{path:'/tab/home-page'}" :selected="$route.path === '/' || $route.path==='/tab/home-page'">
李晓兵's avatar
李晓兵 committed
20 21 22 23
        <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>
李晓兵's avatar
李晓兵 committed
24
      <tabbar-item :link="{path:'/tab/message-center'}" :selected="$route.path === '/tab/message-center'">
李晓兵's avatar
李晓兵 committed
25 26
        <img slot="icon-active" src="../assets/image/tab/message@2x.png">
        <img slot="icon" src="../assets/image/tab/n_message@2x.png">
linxin's avatar
linxin committed
27
        <span slot="label">消息</span>
李晓兵's avatar
李晓兵 committed
28 29 30 31 32 33 34 35 36 37 38 39
      </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>
linxin's avatar
linxin committed
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
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 = []
李晓兵's avatar
李晓兵 committed
63
      }
linxin's avatar
linxin committed
64 65 66 67 68 69 70 71 72
      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
JingChao's avatar
JingChao committed
73
    },
linxin's avatar
linxin committed
74 75 76 77
  },
  methods: {
    tabClick () {
      // console.log('click');
JingChao's avatar
JingChao committed
78
    },
linxin's avatar
linxin committed
79

linxin's avatar
linxin committed
80 81
  },
}
李晓兵's avatar
李晓兵 committed
82 83

</script>
李晓兵's avatar
李晓兵 committed
84 85
<style lang="less">
  #tabBar {
李晓兵's avatar
李晓兵 committed
86

李晓兵's avatar
李晓兵 committed
87 88 89
    .weui-tabbar {
      background-color: #ffffff;
    }
李晓兵's avatar
李晓兵 committed
90

李晓兵's avatar
李晓兵 committed
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
    .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;
          }
李晓兵's avatar
李晓兵 committed
116 117 118 119 120 121 122
        }
      }
    }
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
李晓兵's avatar
李晓兵 committed
123
    .platform-ios {
JingChao's avatar
JingChao committed
124 125 126 127 128
      .weui-tabbar {
        padding-bottom: 34px;
      }
    }
  }
李晓兵's avatar
李晓兵 committed
129 130 131

  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
李晓兵's avatar
李晓兵 committed
132
      .weui-tabbar {
JingChao's avatar
JingChao committed
133
        padding-bottom: 34px;
李晓兵's avatar
李晓兵 committed
134 135 136 137
      }
    }
  }
</style>