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报错

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,257评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 9,296评论 4 129
  • 本文发布在我的博客vue中慎用style的scoped属性许可协议: 署名-非商业性使用-禁止演绎4.0国际 ...
    2ue阅读 6,775评论 2 6
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,656评论 24 688
  • 当我看到的不再是我看到的 当我听到的不再是我听到的 我隔着狭窄的窗向远处眺望 我想看一看我梦想中的远方 我想从高处...
    高小闲阅读 69评论 7 5