欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端轮播图vue-awesome-swiper

程序员文章站 2022-09-26 17:59:49
日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴!? 果然基于Vue的插件还是很多的,于是就搜到了vue-awesome-swiper,是基于Vue ......

日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到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 styles
import '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>
        <div class="swiper-pagination" slot="pagination"></div>
</swiper>

 

data:

export default {
  data () {
    return {
      swiperOption: {     
        autoplay:true,//自动切换
        pagination: {
          el: '.swiper-pagination'//分页器
        }
      },
      swiperSlides: [1, 2, 3]
    }
  }
}

以上能实现基本的轮播图效果,其他效果参考Swiper官方API并在swiperOption中进行参数属性的设置即可。

Swiper4 API:  http://www.swiper.com.cn/api/index.html

vue-awesome-swiper API:  https://www.npmjs.com/package/vue-awesome-swiper