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文件中使用,我做的时候有看见

这样引用的,我好像也这样写过,但是后来就换了vue组件的写法,感觉更好一点吧

    
      
        

 我这是因为功能需要,做了两张图片叠加的功能,如果你只是需要单张轮播,在里面放一个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,就相当于绿色的确是跑前面去了,但是页码没动,我看到的是蓝色,按照人的思维是我看到的依然是绿色,然后只是他现在前面是橘色后面是蓝色。

vue-awesome-swiper爬坑_第1张图片

解决方案是:

在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的属性

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

你可能感兴趣的:(JS,vue+java)