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

小咪咪 2022-11-20 08:22 1003阅读 0赞

# 点击和滑动页面实现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>