Vue项目中使用swiper在移动端制作轮播图

写在前面
在移动端我们经常看到图片轮播图，或者很多图标组成的翻页效果（效果图在下面）。本次我们使用swiper来制作一个移动端的轮播图。

第一步：安装swiper

注意查看安装版本，之后在swiper官网相应版本查看相应属性名称。
以下代码使用的是swiper 4版本

npm install vue-awesome-swiper --save

第二步：在vue文件中使用

1、 引入依赖

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  name: 'swiper',
  components: { swiper, swiperSlide },
...

2、封装了轮播图属性、图片网址数据

注意不同swiper版本属性名称、赋值格式不同
swiperOption：分页，每3s轮播一页
iconSwiperOption：分页，不自动跳转

data () {
  return {
    swiperOption: {
      pagination: { el: '.swiper-pagination' }, // 分页按钮
      autoplay: {
        disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay
        delay: 3000, // 自动切换的时间间隔（单位ms）
      },
    },
    iconSwiperOption: {
      pagination: { el: '.swiper-pagination' },
    },
    swiperList: [], // 轮播图数组对象
    iconsList: [], // 图标二维（分页）数组对象
...

3、重构轮播图

my-swiper是一个轮播图
my-icons是一个图标二维数组分页显示

    
        
            
        
        

    


    
        
            

                

                    
                        
                        {{value.text}}
                    
                
            
        
        

    

第三步：效果示例

1、效果图

轮播图效果图

2、github代码