首页 › Swiper4 交流 › slide的顺序为什么回颠倒？

tangchi695 发表于 2019-3-31 22:03:42

slide的顺序为什么回颠倒？

这个是论坛里找的一个效果，我想迁移到移动端去，在vue里使用，但是发现slide的顺序是颠倒的，变成从右往左排列了，滑动也是反的。有大神能解答一下为什么吗？

tangchi695 发表于 2019-3-31 22:04:25

比如最后一个 全部 跑到第一项去了

tangchi695 发表于 2019-3-31 23:00:48

<template>
<div class="certify">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-slide">
      <img src="images/certify01.png">
      </swiper-slide>
      <swiper-slide class="swiper-slide">
      <img src="images/certify01.png">
      </swiper-slide>
      <swiper-slide class="swiper-slide">
      <img src="images/certify01.png">
      </swiper-slide>
      <swiper-slide class="swiper-slide">
      <img src="images/certify01.png">
      </swiper-slide>
      <swiper-slide class="swiper-slide">
      <img src="images/certify01.png">
      <div class="all_text">全部&gt;</div>
      </swiper-slide>
    </swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
    swiper,
    swiperSlide
},

data() {
    return {
      swiperOption: {
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      loop: false,
      loopedSlides: 5,
      autoplay: false,

      }
    };
},
computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
},
mounted() {
    this.swiper.on("progress", function() {
      for (let i = 0; i < this.slides.length; i++) {
      let slide = this.slides.eq(i);
      let slideProgress = this.slides.progress;
      let modify = 1;
      if (Math.abs(slideProgress) > 1) {
          modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
      }
      let translate = slideProgress * modify * 260 + "px";
      let scale = 1 - Math.abs(slideProgress) / 5;
      let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
      slide.transform("translateX(" + translate + ") scale(" + scale + ")");
      slide.css("zIndex", zIndex);
      slide.css("opacity", 1);
      if (Math.abs(slideProgress) > 3) {
          slide.css("opacity", 0);
      }
      }
    });
    this.swiper.on("setTransition", function(transition) {
      for (var i = 0; i < this.slides.length; i++) {
      var slide = this.slides.eq(i);
      slide.transition(transition);
      }
    });
}
};
</script>
<style>
.certify {
position: relative;
width: 375px;
margin: 0 auto;
}

.certify .swiper-slide {
position: relative;
width: 30vw;
height: 150px;
background: #fff;
box-shadow: 0 2px 4px #ddd;
}
.certify .swiper-slide img {
display: block;
width: 100%;
height: 100%;
}

.all_text {
position: relative;
top: -50%;
}
</style>


这是完整的代码

tangchi695 发表于 2019-3-31 23:01:31

逻辑论坛里另外一个大神分享的代码里抄的

gues6 发表于 2019-4-1 19:35:56

逻辑论坛里另外一个大神分享计划将更加开放空间

查看完整版本: slide的顺序为什么回颠倒？