vue——swiper上下无缝轮播

参考：https://www.jianshu.com/p/5e5e59065e9c 

 

效果：

 

index.html:

<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>

 

vue:

          <div class="scrollBox" v-if="scrollArr.length>0">
            <div class="swiper-banner swiper_vertical" id="swiper_vertical">
              <div class="swiper-wrapper swiper-wrapper-vertical swiper_vertical">
                <div class="swiper-slide swiper_vertical" v-for="(item,index) in scrollArr" :key="index">
                  <p class="text">
                    <img class="srollHead" :src="item.headimgurl" />
                    <span class="scrollName small red">{{item.mname}}</span>
                    <span class="small">刚刚购买</span>
                  </p>  
                </div>
              </div>
            </div>
          </div>

 

getImgs: function() { //created中调用
        let _this = this;
        _this.axios.get('请求链接').then(function(res) {
          if (res.status === 200 && res.data.result === "0") {
            let data = res.data.message.list;
            for (let i in data) {
              _this.scrollArr.push(data[i]);
            }
            _this.scrollLength = _this.scrollArr.length;

            _this.$nextTick(function() {
              if (_this.scroll.length > 0) {
                if (_this.scrollLength == 1) {
                  _this.isAutoplay = 0;
                  _this.isLoop = false;
                } else {
                  _this.isAutoplay = 1;
                  _this.isLoop = true;
                }
                var mySwiper = new Swiper("#swiper_vertical", {
　　　　　　　　　　  direction: "vertical",  //滚动方向
                  autoplay: _this.isAutoplay,
                  loop: _this.isLoop,
　　　　　　　　　　 speed:2000,
                  autoplayDisableOnInteraction: false,
                  preventLinksPropagation: false,
                  observer: true, 
                  observeParents: true, 
                })
              }
            })
          }
        }).catch(function(err) {
          console.log(err);
        })
      },

 

.small {
　　font-size: .12rem;
}

.red {
　　color: red;
}

.scrollBox {
    width: 44%;
    height: .4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    border-radius: 50px;
    font-size: .12rem;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.80);
    overflow: hidden;
    position: relative;
    position: absolute;
    left: .1rem;
    top: .1rem;
    text-align: left;
    z-index: 1;
  }

  .text {
    width: 87%;
    margin: auto;
    height: .32rem;
    display: flex;
    align-items: center;
  }

  .srollHead {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
  }

  .scrollName {
    width: 35.8%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 .05rem;
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: all 1.5s linear;
  }

  .slide-enter {
    transform: translateY(42px);
  }

  .slide-leave-to {
    transform: translateY(-42px);
  }

  .swiper-wrapper {
    font-size: 0;
  }

  .swiper-wrapper-vertical {
    transition-timing-function: linear !important;//无缝滚动
  }

  .swiper-container-autoheight,
  .swiper-container-autoheight .swiper-slide {
    font-size: 0;
    position: relative;
  }

  .swiper_vertical {
    width: 100% !important;
    display: flex;
  }