tab.vue 3.53 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>
李晓兵's avatar
李晓兵 committed
40 41 42 43 44 45
  export default {
    components: {},
    data() {
      return {
        pathList: [],
        transitionName: '',
李晓兵's avatar
李晓兵 committed
46
      }
JingChao's avatar
JingChao committed
47
    },
李晓兵's avatar
李晓兵 committed
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    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
      },
JingChao's avatar
JingChao committed
72
    },
李晓兵's avatar
李晓兵 committed
73 74 75 76
    methods: {
      tabClick() {
        // console.log('click');
      },
linxin's avatar
linxin committed
77

李晓兵's avatar
李晓兵 committed
78 79
    },
  }
李晓兵's avatar
李晓兵 committed
80 81

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

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

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

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

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