vue插件实现移动端轮播图

来源：动视网责编：小采时间：2020-11-27 19:59:02

vue插件实现移动端轮播图

vue插件实现移动端轮播图:这次给大家带来vue插件实现移动端轮播图，vue插件实现移动端轮播图的注意事项有哪些，下面就是实战案例，一起来看一下。果然基于Vue的插件还是很多的，于是就搜到了vue-awesome-swiper，是基于Vue和Swiper开发的轮播图插件，但是看API写出来的怎么总是报警

推荐度：

点击下载本文 文档为doc格式

导读vue插件实现移动端轮播图:这次给大家带来vue插件实现移动端轮播图，vue插件实现移动端轮播图的注意事项有哪些，下面就是实战案例，一起来看一下。果然基于Vue的插件还是很多的，于是就搜到了vue-awesome-swiper，是基于Vue和Swiper开发的轮播图插件，但是看API写出来的怎么总是报警

这次给大家带来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中进行参数属性的设置即可。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

vue插件实现移动端轮播图

推荐度：

点击下载本文 文档为doc格式

标签： VUE 轮播插件

热门焦点

vue插件实现移动端轮播图

vue插件实现移动端轮播图

vue插件实现移动端轮播图

最新推荐

猜你喜欢

热门推荐