vue-awesome-swiper

效果： 鼠标拖动， 自动上下滚动

使用，awesome-swiper是基于swiper， 需要下载两个插件： 注意版本：

 "swiper": "4.5.1",
 "vue-awesome-swiper": "3.1.3",

效果实现 思路：

将接口数据修改成二维数组：

  getHonor() {
      this.$apis.volunteer.getHonor({  }).then(({ data }) => {
        var len = data.list.length
        var arr = []
        for (var i = 0; i < len; i += 4) {
          arr.push(data.list.slice(i, i + 4))
        }
        this.honorList = arr
        this.$nextTick(() => {
          this.swiperOption.loopAdditionalSlides = this.honorList.length
          this.swiperOption.autoplay = this.honorList.length > 3
          // this.swiper.update(true)
        })
      })
    },

swiper 配置：

  swiperOption: {
        direction: 'vertical',
        loopAdditionalSlides: 3,
        observer: true,
        // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        // 修改swiper的父元素时，自动初始化swiper
        autoplay: true,
        loop: true,
        height: 120,
        speed: 4000,
        resize: () => {
          this.swiper.params.height = document.documentElement.getElementsByClassName(
            'mans'
          )[0].offsetHeight
          this.swiper.update(true)
        }
      }

后台数据，动态修改loopAdditionalSlides 属性， autoplay属性

loopAdditionalSlides ：决定循环产生几行（swiper API）
autoPLay： 如果接口数据超出12组， 大于三行，需要自动滚动

  this.$nextTick(() => {
          this.swiperOption.loopAdditionalSlides = this.honorList.length
          this.swiperOption.autoplay = this.honorList.length > 3
          // this.swiper.update(true)
        })