vue 项目 底部TabBar tab切换 完美实现

话不多说上代码了 可以直接新建 tab.vue文件 复制过去 相应引入的页面引进来就ok

<template>
  <div class="app">
    <div class="tabPage">
      <component
        ref="component"
        :is="currentComp"
        :is-login="isLogin"
        :login-type="loginType"
        :show-eye-pub="showeye"
        @toRootPage="toRootPage()"
        @getloginstate="getLoginStateFn"
        @geteyestate="getEyeFun"
      ></component>
    </div>
    <div class="index_content_footer">
      
      <div
        v-for="(item, index) in tabbarList"
        :key="index"
        :class="{ active: isActive == item.value ? true : false }"
        class="page_index"
        @click="handleTab(item, index)"
      >
        <div class="textcent">
          <img :src="num == item.value ? item.src : item.img" alt="" />
        </div>
        <p :class="num == item.value ? 'blue' : 'gray'">{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import CommonMixin from '@/mixins/common-mixin'
import account from '../account/AccountApp.vue'
import index from '../index/IndexApp.vue'
import mine from '../mine/MineApp.vue'
import CommonUtil from '@/assets/js/common-util'

export default {
  name: 'IndexApp',
  components: {
    account,
    index,
    mine
  },
  mixins: [CommonMixin],
  data () {
    return {
      //获取登录方式参数
      loginType: {},
      //用户是否登陆
      isLogin: false,
      //   首页全局小眼睛状态
      showeye: false,
      num: '1',
      isActive: '0',
      currentComp: 'account',
      tabbarList: [
        {
          name: '首页',
          //手机银行红色主题图标和组件
          img: [require('@/assets/images/aili-imges/tabbar/icon_home_tab_normol.png')],
          src: [require('@/assets/images/aili-imges/tabbar/icon_home_tab_selected.png')],
          //手机银行默认主题颜色图标和组件
          value: '0',
          comp: 'index'
          // islogin: false
        },
        {
          name: '账户',
          //手机银行红色主题图标和组件
          img: [require('@/assets/images/aili-imges/tabbar/icon_account_tab_normal.png')],
          src: [require('@/assets/images/aili-imges/tabbar/icon_account_tab_selected.png')],
          //手机银行默认主题颜色图标和组件
          value: '1',
          comp: 'account'
          // islogin: false
        },
        {
          name: '资讯',
          //手机银行红色主题图标
          img: [require('@/assets/images/aili-imges/tabbar/icon_info_tab_normal.png')],
          src: [require('@/assets/images/aili-imges/tabbar/icon_info_tab_selected.png')],
          // 手机银行默认主题颜色图标
          value: '2',
          comp: 'index'
          // islogin: false
        },
        {
          name: '我的',
          //手机银行红色主题图标
          img: [require('@/assets/images/aili-imges/tabbar/icon_me_tab_nomal.png')],
          src: [require('@/assets/images/aili-imges/tabbar/icon_me_tab_selected.png')],
          // 手机银行默认主题颜色图标
          value: '3',
          // 显示的页面comp
          comp: 'mine'
          // islogin: true
        }
      ]
    }
  },
  created () {
    CommonUtil.getLoginType()
      .then(res => {
        this.loginType = res
        console.log('首页获取登录类型参数res------' + JSON.stringify(res))
        this.getLoginState(res)
      })
  },
  mounted () {
    // 添加resume监听事件
    this.$goose.on('resume', this.resumeHomePage)
  },
  methods: {
    getLoginState (typeParam) {
      let target = {
        param: {
          loginType: typeParam,
          //仅判断是否登陆，但不跳转登录
          canJumpLogin: false
        },
        closeCurrentApp: false
      }

      CommonUtil.isUserLogin(target)
        .then(() => {
          this.isLogin = true
          console.log('首页判断是否登陆-------' + this.isLogin)
          switch (this.currentComp) {
            case 'accountt':
              this.$refs.component.resumeFn()
              break

            case 'account':
              this.$refs.component.isLogin()
              break

            default:
              break
          }
        })
        .catch(() => {
          this.isLogin = false
          console.log('首页判断是否登陆-------' + this.isLogin)
        })
    },
    toRootPage (item) {
      console.log(item)
      console.log(666)
      this.isActive = '1'
      //新主题
      this.currentComp = 'Home'
      // 测试
      let options = {}

      switch (item.name) {
        case '账户':
          options = {
            appId: '00010006',
            param: {
              url: '/www/account_index.html'
            },
            closeCurrentApp: false
          }

          this.$goose.context.startH5App(options)
          break
        case '理财推荐':
          options = {
            appId: '00010006',
            param: {
              url: '/www/financial_details.html',
              data: '理财推荐'
            },
            closeCurrentApp: false
          }
          this.$goose.context.startH5App(options)
          break
        default:
          options = {
            appId: '00010019',
            param: {
              url: '/www/deposit_index.html'
            },
            closeCurrentApp: false
          }
          this.$goose.context.startH5App(options)
          break
      }

      /*
       *默认主题
       * this.currentComp = 'index'
       */
      this.num = '1'
    },
    getEyeFun (msg) {
      this.showeye = msg
    },
    getLoginStateFn (msg) {
      this.isLogin = msg
    },
    handleTab (item) {
      this.isActive = item.value
      this.currentComp = item.comp
      this.num = item.value
    },

    /**
     * @description 监听页面进入resume
     * @author 艾力
     * @wechat ：303007484
     */
    resumeHomePage () {
      console.log('首页进入监听')
      CommonUtil.getLoginType()
        .then(res => {
          this.loginType = res
          console.log('首页获取登录类型参数res------' + JSON.stringify(res))
          this.getLoginState(res)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.tabPage {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.index_content_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: @white;
  box-shadow: -3px 0 3px 1px @gray-3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .page_index {
    height: 36px;
    width: 20%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .blue {
       color: @mb-index-tab;
    }
    .gray {
      color: @mb-index-tan-no;
    }
    .textcent {
      width: 100%;
      text-align: center;
    }
    img {
      width: 20px;
      height: 20px;
    }
    p {
      font-size: 10px;
      color: @green-dark-little;
      letter-spacing: 0.12px;
      text-align: center;
    }
  }
}
</style>

希望能帮到你
用到了记得点赞哦