vue-awesome-swiper插件爬坑

最近自己在做一个基于vue的知乎的移动端单页面，遇到很多坑，先说一下遇到最大的坑，其实并不推荐使用 vue-awesome-swiper,如果项目应用轮播，切换少的话。言归正传，现在来介绍vue-awesome-swiper的使用方法。

首先基于的是vue2.0。

1， 使用npm安装

npm install vue-awesome-swiper --save

2，引入资源（本身vue-awesome-swiper就很大了，这里推荐全局引入）

在main.js内

import VueAwesomeSWiper  from 'vue-awesome-swiper'// 引入插件
import 'swiper/dist/css/swiper.css' //引入轮播样式，必须要引入，我就上了这个的亏

Vue.use(VueAwesomeSWiper) 

样式的路径是基于node-module的

3，在所在的组件中使用:

模板文件

<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="top in tops">
        <img :src="top.image">
        <div></div>
        <h3>{{top.title}}</h3>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

js

export default {
      data() {
          return {
            swiperOption:{
                autoplay: {
                  delay:3000
                },
                direction: 'horizontal',
                effect: 'slide',
                loop: false,
                pagination:{
                  el:'.swiper-pagination',
                  type: 'bullets'
                },
                autoplayDisableOnInteraction: false,
                observer: true,
                observeParents: true
            }
   }，
  computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
      },
}

常用的属性配置：

Autoplay  // 自动切换时间间隔 单位ms

设置为true启动自动切换，可以设置下面的delay属性，设置切换时间

 

pagination(分页器）

el： 分页的元素

type： 分页的形式

“bullets” 圆点

"fraction" 分式

“progressbar” 进度条

“custom”  自定义

 

effects 切换效果

effect : 'slide'(唯一切换)  可设置为 slide（普通切换），fade(淡入)， cube（方块）coverflow"（3d流）"flip"（3d翻转）。

 

 

loop

设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。

 

 

 

 

后续再补，新入坑好多东西不懂

转载于:https://www.cnblogs.com/lrgupup/p/8609090.html