vue-awesome-swiper轮播插件

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)





5. 在别的页面中引用,如在Home.vue





6.防抖动:在网速不好的情况下,swiper未加载出前,下方的div会占据,等到swiper出来时,占据位置的div会蹦走

处理方法:swiper外层嵌套div,让这个div撑开高度





7.轮播图下面跟着跑的一排小圆点





8.Vue是数据驱动的框架,轮播的图片地址和数量不该固定写死

处理方法:v-for循环item,注意循环要加key





9.循环轮播

处理方法:加loop值为true





 

你可能感兴趣的:(vue-awesome-swiper轮播插件)