这次给大家带来vue插件实现移动端轮播图，vue插件实现移动端轮播图的注意事项有哪些，下面就是实战案例，一起来看一下。
果然基于Vue的插件还是很多的，于是就搜到了vue-awesome-swiper，是基于Vue和Swiper开发的轮播图插件，但是看API写出来的怎么总是报警告啊……还是自己研究研究吧……
本文只适用于Vue脚手架中的使用，CDN引入和使用参考文章最后API链接。
安装
npm
npm install vue-awesome-swiper --save
引入
全局引入
在入口文件main.js中进行引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require stylesimport 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)局部引入
在需要用到轮播图的vue页面中引入
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'并在components中添加swiper
components:{
swiper,
swiperSlide
}使用
html结构
<swiper :options="swiperOption">
<swiper-slide v-for="slide in swiperSlides" :key="slide.id">I'm Slide {{ slide }}</swiper-slide>
<p class="swiper-pagination" slot="pagination"></p></swiper>data：
export default {
data () { return {
swiperOption: {
autoplay:true,//自动切换
pagination: {
el: '.swiper-pagination'//分页器
}
},
swiperSlides: [1, 2, 3]
}
}
｝以上能实现基本的轮播图效果，其他效果参考Swiper官方API并在swiperOption中进行参数属性的设置即可。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是vue插件实现移动端轮播图的详细内容。更多信息请关注PHP中文网其他相关文章！
