1. github上搜索vue-awesome-swiper
2. readme中有安装方法,建议在插件名后@版本号,使用稳定的老版本 npm install vue-awesome-swiper@x.x.x --save
3. 在项目main.js中引入
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
4.创建单文件组件Swiper.vue(单文件组件三部分template、script、style)
<template> <swiper :options="swiperOption"> <!-- slides -->
//这里是轮播的内容 <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>
<img src=""/>
</swiper-slide> <swiper-slide>I'm Slide 4</swiper-slide> <swiper-slide>I'm Slide 5</swiper-slide> <swiper-slide>I'm Slide 6</swiper-slide> <swiper-slide>I'm Slide 7</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div>
//两个箭头,不需要可以删了 <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div>
//滚动条,不需要可以删了 <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> export default { name: 'HomeSwiper', // 子组件的data必须是个函数 data() { return { swiperOption: {} } }, } </script> <style lang="stylus" scoped> </style>
5. 在别的页面中引用,如在Home.vue
<template> <div> <home-header></home-header> <home-swiper></home-swiper> </div> </template> <script> import HomeHeader from './component/Header' import HomeSwiper from './component/Swiper' export default { name: 'Home', components: { HomeHeader, HomeSwiper } } </script> <style lang="stylus"> </style>
6.防抖动:在网速不好的情况下,swiper未加载出前,下方的div会占据,等到swiper出来时,占据位置的div会蹦走
处理方法:swiper外层嵌套div,让这个div撑开高度
<template> <div class="wrapper"> <swiper :options="swiperOption"> ... </swiper> </div> </template> <script> ... </script> <style lang="stylus" scoped> .wrapper overflow: hidden width:100% height:0 padding-bottom: 31.25% (宽高比,如果写在height,那么是和父级元素的高度,不是对比wrapper的宽度) </style>
7.轮播图下面跟着跑的一排小圆点
<template> <div class="wrapper"> <swiper :options="swiperOption"> <!-- slides --> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <swiper-slide>I'm Slide 4</swiper-slide> <swiper-slide>I'm Slide 5</swiper-slide> <swiper-slide>I'm Slide 6</swiper-slide> <swiper-slide>I'm Slide 7</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></