基于swiper和vue实现：点击和滑动页面实现tab切换

点击和滑动页面实现tab切换

components / tabItem

下面有 swiper.vue nav.vue one.vue two.vue …

在main.js中：
const eventHub = new Vue();
new Vue({ data: { eventHub } })

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

components / tabItem

swiper.vue

<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
          <keep-alive>
            <component :is="item.component"></component>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 *  https://swiperjs.com/get-started/
 *  获取swiper的js文件和css文件
 * */ 
import Swiper from '@/assets/js/swiper-bundle.min.js';
import '@/assets/css/swiper-bundle.min.css';

// 引入tabItem组件
import one from '@/components/tabItem/one';
import two from '@/components/tabItem/two';
import three from '@/components/tabItem/three';
import four from '@/components/tabItem/four';
import five from '@/components/tabItem/five';

export default {
  name: 'Index',
  data () {
    return {
      swiperList: [
        { path: '/one', component: one },
        { path: '/two', component: two },
        { path: '/three', component: three },
        { path: '/four', component: four },
        { path: '/five', component: five }
      ]
    }
  },
  components: {
    one, two, three, four, five
  },
  methods: {

  },
  mounted () {
    /**
     *  设定初始化时slide的索引。
     *  Swiper默认初始化时显示第一个slide，有时想初始化时直接显示其他slide，可以做此设置
     */
    var mySwiper = new Swiper('.swiper-container', {
      initialSlice: this.$route.path === '/one' ? 0 : this.$route.path === '/two' ? 1 : this.$route.path === '/three' ? 2 : this.$route.path === 'four' ? 3 : this.$route.path === '/five' ? 4 : 0
    });

    // 监控滑动后当前页面的索引，将索引发射到导航组件
    mySwiper.on('slideChange', () => {
      // 左右滑动时将当前slide的索引发送到nav组件
      this.$root.eventHub.$emit('slideTab', mySwiper.activeIndex);
    })

    // 接收nav组件传过来的导航按钮索引值，跳转到相应的内容区
    this.$root.eventHub.$on('changeTab', (index) => {
      mySwiper.slideTo(index, 0, false)
    })

  }
}
</script>

<style lang='less' scoped>
</style>

nav.vue

<template>
  <div class="nav">
    <ul class="nav-list">
      <li
        :class="['item',{'active': nowIndex === index}]"
        v-for="(item,index) in navList"
        :key="index"
        @click="tabClick(index)"
      >{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import VueRouter from 'vue-router'

export default {
  name: 'Index',
  data () {
    return {
      navList: [
        { name: '页面一' },
        { name: '页面二' },
        { name: '页面三' },
        { name: '页面四' },
        { name: '页面五' }
      ],
      nowIndex: 0
    }
  },
  methods: {
    tabClick (index) {
      this.nowIndex = index;
      this.$root.eventHub.$emit('changeTab', index)
    },
    slideTab (index) {
      this.nowIndex = index;
      let router = new VueRouter();
      /**
       *  利用路由的push方法更新路径地址 
       *  this.$router 实际上就是全局路由对象任何页面都可以调用 push(), go()等方法；
       */
      switch (index) {
        case 0:
          router.push({ path: '/one' });
          break;
        case 1:
          router.push({ path: '/two' });
          break;
        case 2:
          router.push({ path: '/three' });
          break;
        case 3:
          router.push({ path: '/four' });
          break;
        case 4:
          router.push({ path: '/five' });
          break;

        default:
          router.push({ path: '/one' });
          break;
      }
    },
    initPage () {
      /**
       *  this.$route  表示当前正在用于跳转的路由器对象，
       *  可以调用其name、path、query、params等属性。
       */
      switch (this.$route.path) {
        case '/one':
          this.nowIndex = 0;
          break;
        case '/two':
          this.nowIndex = 1;
          break;
        case '/three':
          this.nowIndex = 2;
          break;
        case '/four':
          this.nowIndex = 3;
          break;
        case '/five':
          this.nowIndex = 4;
          break;
        default:
          this.nowIndex = 0;
          break;
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 初始化，保证刷新页面后内容区和导航键一致
      this.initPage();
    })
    // 接收swiper组件发射的index进行导航按钮切换高亮和更新模板地址
    this.$root.eventHub.$on('slideTab', this.slideTab);
  }
}
</script>

<style lang='less' scoped>
.nav {
  margin-bottom: 20px;
  .nav-list {
    width: 100%;
    overflow: hidden;
    .item {
      width: 20%;
      display: inline-block;
      text-align: center;
      height: 48px;
      line-height: 48px;
      &.active {
        background-color: #ccc;
      }
    }
  }
}
</style>

views / home.vue

<template>
  <div class="index">
    <v-nav></v-nav>
    <v-swiper></v-swiper>
  </div>
</template>

<script>
import nav from '../components/tabItem/nav';
import swiper from '../components/tabItem/swiper';

export default {
  name: 'Index',
  data () {
    return {
    }
  },
  components: {
    'v-nav': nav,
    'v-swiper': swiper
  },
  methods: {

  }
}
</script>

<style lang='less' scoped>
</style>