vue异步轮播问题

功能：点击菜单切换轮播，轮播内容三秒切换一页，菜单每5min自动轮播一次

插件：vue-awesome-swiper.js

遇到的问题：

• 当轮播内容分组且异步加载时loop不生效

• 菜单切换时 如果轮播只有一页，下一个菜单内容有多页时会停止轮播，此时应判断加载页数手动开启/停止轮播

代码：

https://github.com/ZHAISHENKING/vue_api_demo/blob/master/vue_swiper/demo2.html

想实现的效果:

图中it为菜单，s为slider轮播图

实现一(fail)

swiperOption: {
	...
  // 容器能够同时显示的slides数量
  slidesPerView: 3,
  // 定义slides的数量多少为一组
  slidesPerGroup: 3,
  slidesPerColumn: 2,
  slidesPerColumnFill: 'row'
}

设置这么多参数，来看看他们的作用

最终实现的效果是这样的:

明显不符合预期…

而且有其他的样式问题：

• 在slide数量不足以填满的情况下可能会出现布局不理想（例如4行3列，但是只有10个slide），建议使用空的slide将数量补足。
• 想要自定义slide宽度slidesPerView参数就得设置为’auto’，

也就是说不满4个的时候它自动flex布局就很奇怪，s1,s2为一列， s3在中间, 而且’auto’不支持多行模式

实现二(success)：

<swiper :options="swiperOption" ref="mySwiper">
  <!-- slides -->
  <!-- 数量超过三个就放到下一页 -->
  <swiper-slide 
    v-for="(item, index) in Math.ceil(slideList.length/3)"
    :key="index"
    v-if="slideList.length>0"
    >	
    	<!-- ul和li样式自定义 -->
      <ul>
      	<!-- 通过slice切片获取每页内容 -->
        <li v-for="(e, i) in slideList.slice(index*3, (index+1)*3)"> 
          <span class="name">{{e.name}}</span>
          <span class="count">{{e.count}}</span>
        </li>
      </ul>
  </swiper-slide>
	<div class="swiper-pagination"  slot="pagination"></div>
</swiper>