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

          <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;

  }