vue项目常用组件和框架结构介绍(3)

8.vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper

通过它可以实现基本轮播，横轴的切换，横轴的列表滚动等。

例如我要去实现四个tab切换这样的功能，但是简单的display这样的效果我又觉得不是很满意。那么我们就可以通过swiper来实现，每次tab里面的content都会对应swiper的一个swiper-item。切换的tab，其实就是swiper里面的next page或者before page.

data(){
　　return{
　　　　swiperOption: {
  slidesPerView :'auto',
  direction: 'horizontal',
  freeMode : true,
  loop: false,
  spaceBetween: 20,
 　　　},
 }
}

<swiper :options="swiperOption" ref="swiper" v-if="list&& list.length !== 0">
  <swiper-slide v-for="(item,index) in list" :key="index" class="hot-item">
  <router-link :to="{name:'quickCar',params:{carID:item.CarID}}" class="description_car">
  <img v-lazy="item.Attachments.length !==0 && item.Attachments[0].FilePath"/>
   <span>¥{{item.price}}/日</span>
  </router-link>
  </swiper-slide>
 </swiper>
 <p class="noData" v-else></p>

9.better-scroll

https://github.com/ustbhuangyi/better-scroll

实现纵轴列表的滚动，以及当有嵌套的路由的时候，通过better-scroll来实现的禁止父路由随着子路由的滚动的问题。

better-scroll其实也可以去实现横轴的滚动，但是为什么不使用better-scroll来处理呢？这是因为在better-scroll实现横轴滚动的时候，我们无法在better-scorll的content的内容区域里去下向拉动我们的页面。所以导致的一个Bug就是，在better-scroll横轴滚动的区域里，页面动不了了。

如上图：横轴滚动下面还有内容，但是在图片所示的区域里面，无法向下拉动。所以横轴的滚动其实也是通过vue-awesome-swiper来实现的。

10.axios

基本功能就是通过axios来请求后台接口的数据。并且axios可以配合router更好的实现类似后台的拦截器的功能，例如处理token过期这样问题。因为当token过期的时候，仅仅通过vue-router的router.beforeEach来处理就有点无能为力了。这时候就需要配合后台响应返回的code来进行url的处理。

11.fastclick

解决点透和点击延时的问题//www.jb51.net/article/131369.htm