vue实现整屏滚动切换

本文实例为大家分享了vue实现整屏滚动切换的具体代码，供大家参考，具体内容如下

1、下载vue-awesome-swiper

npm i vue-awesome-swiper -S

2、在main.js引入

import vueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(vueAwesomeSwiper);

3、直接上案例，新建一个路由页面

 

 

.swiper-slide {
 font-size: 24px;
 text-align: center;
 line-height: 100px;
}
.swiper-slide:nth-child(2n) {
 background: skyblue;
}
.swiper-slide:nth-child(2n-1) {
 background: seashell;
}

4、电脑浏览器可能有问题，请使用真机测试

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。