关于Swiper和vue-awesome-swiper的用法

关于Swiper和vue-awesome-swiper的用法

这几天公司要做一个轮播图的效果，想到了之前写JQuery的用到的swiper轮播图插件，在网上一搜发现了有对于vue更友好的vue-awesome-swiper，但是也是基于swiper封装的。然后在网上搜集教程npm装包，打开各种报错，无论是指定版本还是下载最新的都是不行，终于在多次尝试下，发现了可以用的版本，我用的是vue 2.X版本，有需要的朋友可以试试我的方法。下面是详细过程及代码：

---

1. 安装依赖包

npm install swiper@6.8.1 --save-dev
npm install vue-awesome-swiper@3.1.3 --save-dev

安装成功后在package.json里查看

2. 在main.js全局导入

/* 引入swiper及其相关组件 */
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)
/* 引入swiper及其相关组件 */

这里有个问题，如果你的swiper版本和我的一样，就可以直接复制；如果不一样的话，css文件的位置可能不同，会导致引入报错，具体css文件位置打开node_modules文件夹下的swiper文件夹就能看到

3. 在项目中使用

   HTML代码

<swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide v-for="(item, index) in swiperData" :key="index">
    <img class="swiper-img" :src="item.url" />
    <div class="floatBox">
      <ul>
        <li v-for="(childItem, childIndex) in item.floatData" :key="childIndex">
          <label>{{ childItem.label }}</label>
          <span>{{ childItem.span }}</span>
        </li>
      </ul>
    </div>
  </swiper-slide>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

data里面的数据

给轮播图绑定事件在轮播图的配置项swiperOption里的on就可以添加配置项，这里我添加了一个click点击事件，可以输出当前图片的索引（这里有个问题是click事件里面this指向的是swiper对象实例，并不是vue，需要用箭头函数来写click的回调函数）

// 轮播图配置（具体配置可参考http://t.zoukankan.com/xiaocaiyuxiaoniao-p-10521462.html）
swiperOption: {
  loop: true,
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 1.2,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
    progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反
    bulletElement : 'li', //设定分页器指示器（小点）的HTML标签。
    // dynamicBullets: true,  //动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。
    // dynamicMainBullets: 2, //动态分页器的主指示点的数量
    clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
  },
  navigation: {
    nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
    prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
    hideOnClick: true, //点击slide时显示/隐藏按钮
    disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
    hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
  },
  coverflowEffect: {
    //修改其中的数值，即可
    rotate: 0, //旋转
    stretch: 80, //拉伸
    depth: 100, //深度
    modifier: 1,
    slideShadows: false,
  },
  observer: true, //修改swiper自己或子元素时，自动初始化swiper
  observeParents: true, //修改swiper的父元素时，自动初始化swiper
  on: {
    click:() =>{
      console.log(this.$refs.mySwiper.swiper.realIndex)
    }
  }
},
// 轮播图及浮窗数据
swiperData:[
  {
    url:require("../assets/images/carImg.png"),
    floatData:[
      {
        label: '型号：',
        span: 'A1234567'
      },
      {
        label: '参数：',
        span: '20.2'
      },
      {
        label: '状态：',
        span: '正常'
      },
      {
        label: '上次维护时间：',
        span: '2022.9.1'
      }
    ]
  },
  {
    url:require("../assets/images/carImg.png"),
    floatData:[
      {
        label: '型号：',
        span: 'A1234567'
      },
      {
        label: '参数：',
        span: '20.2'
      },
      {
        label: '状态：',
        span: '正常'
      },
      {
        label: '上次维护时间：',
        span: '2022.9.1'
      }
    ]
  },
  {
    url:require("../assets/images/carImg.png"),
    floatData:[
      {
        label: '型号：',
        span: 'A1234567'
      },
      {
        label: '参数：',
        span: '20.2'
      },
      {
        label: '状态：',
        span: '正常'
      },
      {
        label: '上次维护时间：',
        span: '2022.9.1'
      }
    ]
  },
  {
    url:require("../assets/images/carImg.png"),
    floatData:[
      {
        label: '型号：',
        span: 'A1234567'
      },
      {
        label: '参数：',
        span: '20.2'
      },
      {
        label: '状态：',
        span: '正常'
      },
      {
        label: '上次维护时间：',
        span: '2022.9.1'
      }
    ]
  }
]

Sass代码

/deep/ .swiper-pagination-bullet{background:#fff !important;}
.swiper-container{height:100%;}
.swiper-slide{
  position:relative;
  width:100%;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  img:hover + .floatBox{display:block;}
}
.swiper-button-prev{
  width:23px;
  height:36px;
  background:url(~@/assets/images/toLeftIcon.png) no-repeat;
  &:after{font-size:0;}
}
.swiper-button-next{
  width:23px;
  height:36px;
  background:url(~@/assets/images/toRightIcon.png) no-repeat;
  &:after{font-size:0;}
}
.floatBox{
  display:none;
  position:absolute;
  left:60%;
  top:8%;
  width:145px;
  height:147px;
  background-color:rgba(1,196,249,0.3);
  border:1px solid #01c4f9;
  ul{padding-top:8px;}
  li{padding-left:8px; height:26px; line-height:26px; font-size:16px; color:#fff; text-align:left;}
}

最后附上效果图