vue-awesome-swiper爬坑

swiper官方文档介绍的挺清楚，官方地址：https://www.swiper.com.cn/

但是，看起来是一回事，做起来就是另一回事情了，还有就是官方文档针对的是js ，我们是vue 里引用

1、npm vue-awesome-swiper安装模块

2.在当前页面引入，也可以在mian.js引入吗，我是在当前页面引入的

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

components: { swiper,swiperSlide},

3.在html文件中使用，我做的时候有看见<div class="swiper"></div>这样引用的，我好像也这样写过，但是后来就换了vue组件的写法，感觉更好一点吧

    <swiper ref="mySwiper" style="height:90%" :options="swiperOption">
      <swiper-slide v-for="(img, index) in list" :key="index">
        <div class="swiper-zoom-container" style="position:relative">
          <img :src="list[index]" style="position:absolute;height:100%">
          <img  :src="" style="position:absolute;height:100%">
        </div>
      </swiper-slide>
      <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>

我这是因为功能需要，做了两张图片叠加的功能，如果你只是需要单张轮播，在里面放一个img皆可以了，效果图我以后有空时补到文章最后，标签这样就好了，下面要在js的进行一些配置：

4.这些就是一些下标的配置和事件监听，详情见官方文档，只提供使用模板，on事件还是要说一下，监听滑动事件，获取当前所在页码。

             swiperOption: {
          updateOnImagesReady: true,
          roundLengths: true,
          zoom: true,//缩放
          pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
          },
          on: {
            slideChange() {
              _this.i = this.activeIndex;
            }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }

5.你以为这样就完了吗，我也以为这样就完了，但是我们要实现一个顺序调换的功能，这个组件好像没有实现这个功能，我们就放一个按钮，按一下，当前就与插入到前一张图片的前面，但是这时的页码还是当前页，就像下图中，我把数组里的蓝色和绿色调换了，但是当前页码仍然是2，就相当于绿色的确是跑前面去了，但是页码没动，我看到的是蓝色，按照人的思维是我看到的依然是绿色，然后只是他现在前面是橘色后面是蓝色。

解决方案是：

在computed获取组件

    computed: {
      ...mapGetters(['user']),
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },

  var index = this.i;//i是当前页码
        if (index - 1 >= 0) {
          var temp1 = this.localId[index];
          var temp2 = this.localId[index - 1];
          this.localId.splice(index, 1, temp2);
          this.localId.splice(index - 1, 1, temp1);//在数组里调换图片顺序
          if (this.iswkwebview) {
            var t1 = this.localImgData[index];
            var t2 = this.localImgData[index - 1];
            this.localImgData.splice(index, 1, t2);
            this.localImgData.splice(index - 1, 1, t1);
          }
          this.i = this.i - 1;
          this.swiper.slideTo(index - 1, 500, false);//页码前移，swiper是computed的属性

粗缯大布裹生涯，腹有诗书气自华。

vue-awesome-swiper爬坑

猜你喜欢