背景

有个移动端的Vue项目，新的需求需要加上如下图这种左/右滑，加载前/后项的，毫无疑问swiper走起，vue-awesome-swiper。

轮播.png

实践

异步获取数据：

  1. <template>
  2.   <swiper :options="swiperOption">
  3.     <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide>
  4.     <div class="swiper-pagination" slot="pagination"></div>
  5.   </swiper>
  6. </template>
  8. <script>
  9.   import { swiper, swiperSlide } from 'vue-awesome-swiper'
  10.     import 'swiper/dist/css/swiper.css'
  11.   export default {
  12.     name: 'carrousel',
  13.     components: {
  14.       swiper,
  15.       swiperSlide
  16.     },
  17.     data() {
  18.       return {
  19.         swiperOption: {
  20.           effect: "coverflow",
  21.           grabCursor: true,
  22.           centeredSlides: true,
  23.           slidesPerView: "auto", // virtual时不能为"auto"
  24.           observer: true,
  25.           observeParents: true,
  26.           coverflowEffect: {
  27.             rotate: 0,
  28.             stretch: -20,
  29.             depth: 70,
  30.             slideShadows: false
  31.           }
  32.         },
  33.         swiperSlides: [1, 2, 3, 4, 5]
  34.       }
  35.     },
  36.     mounted() {
  37.       setInterval(() => {
  38.         console.log('simulate async data')
  39.         if (this.swiperSlides.length < 10) {
  40.           this.swiperSlides.push(this.swiperSlides.length + 1)
  41.         }
  42.       }, 3000)
  43.     }
  44.   }
  45. </script>

但是列表数据比较多，不可能全部渲染呀，怎么办呢？
虚拟列表你值得拥有~查了下swiper的文档，virtual属性支持虚拟列表，perfect！

  1. <div class="swiper-container">
  2.     <div class="swiper-wrapper"></div>
  3. </div>
  4. <script>
  5. var mySwiper = new Swiper('.swiper-container', {
  6.   virtual: {
  7.     slides: (function () {
  8.       var slides = [];
  9.       for (var i = 0; i < 600; i += 1) {
  10.         slides.push('Slide ' + (i + 1));
  11.       }
  12.       return slides;
  13.     }()),
  14.   },
  15.   //或者 virtual: true,
  16. });
  17. </script>

等等，上面这段virtual属性的代码是swiper的，vue上咋使用呢？
去vue-awesome-swiper issues上查查。
swiper英文文档上有提供例子（React也有），自行参考：https://swiperjs.com/api/#virtual

Note that according to Virtual Slides realization it doesn’t work with loop mode, slidesPerColumn more than 1 and slidesPerView: 'auto'

virtual 和 slidesPerView: ‘auto’ 不能一起使用，那怎样让页面中出现前后slide的一部分呢？
英文文档中 slidesPerView取值Number or “auto”，最开始没想到可取小数（&%￥#），参考 slidesPerView，可以设置为数字（可为*小数，小数不可loop），或者 ‘auto’则自动根据slides的宽度来设定数量。
中英文文档混着看的我。。

上面的例子里异步数据怎么处理呢？
可以参考我下面的例子，例子中还有点疑问，知道的可以帮忙解决下哦~

Vue+Swiper虚拟列表 - 图3