基于swiper和vue实现:点击和滑动页面实现tab切换
点击和滑动页面实现tab切换components / tabItem下面有 swiper.vue nav.vue one.vue two.vue …router.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const ro
·
点击和滑动页面实现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>
更多推荐
已为社区贡献9条内容
所有评论(0)