vue项目swiper插件的使用

参考连接：vue-sawesome-swiper官方npm库介绍

step1.安装插件

cnpm install vue-awesome-swiper --save

step2.在当前页面引用插件

//  引入swiper的css样式
   require('swiper/dist/css/swiper.css');
   import Vue from "vue";
   import VueAwesomeSwiper from 'vue-awesome-swiper';
   Vue.use(VueAwesomeSwiper);
   import { swiper, swiperSlide } from 'vue-awesome-swiper';

step3.组件声明

      components: {
          swiper,
          swiperSlide,
      },

step4.data数据声明

!!! notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true

data(){
    return {
            notNextTick: true,
            swiperOption: {
              // swiper optionss 所有的配置同swiper官方api配置
//              autoplay: 3000,
              direction: 'horizontal',
              grabCursor: true,
              setWrapperSize: true,
              autoHeight: true,
              pagination: '.swiper-pagination',
              paginationClickable: true,
              prevButton: '.swiper-button-prev',
              nextButton: '.swiper-button-next',
//              scrollbar: '.swiper-scrollbar',
              mousewheelControl: true,
              observeParents: true,
              // if you need use plugins in the swiper, you can config in here like this
              // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
              debugger: true,
              // swiper callbacks
              // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
              onTransitionStart(swiper){
                console.log(swiper)
              },
        }
}}

step5.html标签结构

      <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(pic,index) in photoArg">![](pic)</swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
      </swiper>

step6.调用swiper封装好的方法

添加swiper计算属性方法

 // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    computed: {
      swiper:function() {
        return this.$refs.mySwiper.swiper
      },
    },

在项目方法中调用swiper插件的封装方法（slideTo()）

 // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
methods:{
      checkPic:function (index,picID) {
          var self = this;
          self.popupImgFlag = true;
        self.photoArg = self.items[index].picUrl;
        this.swiper.slideTo(picID, 1000, false);    //slideTo()
        document.body.style.overflowY = "hidden";
        document.getElementById("app").style.overflowY = "hidden";
      },
}

step7.修改分页器样式

在当前组件下，另外再创建要给style标签，且不用scoped限制作用域，再把要修改的分页器样式写在此style标签内。（过程中，直接在当前的style样式（有scoped限制）修改样式无效，遂通过搜索找到此方法）

<style scoped>
....（在这里修改分页器样式无效）
<style>
//额外添加下述多一个style标签样式
<style>
  #skinDetail .swiper-pagination-bullet{    //记得在其前面添加父级样式名（如#skinDetail），以避免影响全局样式
    background-color: #fff;
  }
  #skinDetail .swiper-pagination-bullet-active{
    background-color: #007aff;
  }
</style>

---

项目过程遇到的坑：

在项目中，我的html结构内容是包含在一个块内，并通过v-if控制轮播的出现和消失，然而在点击出现内容时，页面轮播插件显示正常，而swiper方法却不可执行，console后台报错undefined，最后排查发现是计算属性computed在执行时，获取不到swiper对象，而后将v-if改为v-show即解决。（报错的原因：开始v-if为false，此时弹窗并未编译渲染到当前页面结构，因此computed执行时，并未找到swiper内容，所以执行方法this.swiper.slideTo()报错,这也从正面证明了v-if的初始化较快，但切换代价高；）

    <!--点击图片弹窗-->
    <div class="popupImg"  v-if="popupImgFlag" @click="closePoupPic">
      <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(pic,index) in photoArg">![](pic)</swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
      </swiper>
    </div>

console报错