学一学swiper

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

因为热爱所以坚持~

前言

毕业后进入公司到今天已经三个多月了，前几天刚经历了转正答辩！今年大环境很严峻，很多公司都或多或少地进行了裁员，像我们这样在试用期的新人首当其冲。和我同时进入公司的小伙伴们很多都被辞退了，突然间所在的小组就剩自己一个新人了，这个滋味有点儿难受。这个时候被辞退也不一定就不好，万事不破不立！但是既然留下来了，就应该珍惜机会，毕竟大学四年全用来玩了。。。无论如何，记得当初是因为喜欢才做的开发，坚持下去吧！

Swiper

需求

源于上个月参与开发的一个功能模块，需求是这样的：接口返回一个arraylist，根据里面的项动态展示相应地页面，页面上只是做数据的展示。效果图如下：

比如上图，arraylist里三个值，会有三个可以滑动的页面，每个页面上布局一样，数据不同。

开发

swiper大致框架

在使用之前需要引入两个文件：swiper.min.js和swiper.min.css,具体可以去官网看。

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>

上面的代码是滑块的框架，因为需求里强调每个slide页面布局完全一致，只是动态绑定的数据不一致而已，所以这里作出如下改进：

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item,index) in abclist" :key=index>
          {{item.XXX}}
      </div>
    </div>
</div>

这样每个滑块的结构就搭好了，明天继续写对应的JavaScript和style。