swiper移动端横向滑动问题处理

swiper移动端横向滑动问题处理

一、swiper初始化问题

数据加载的过程中使用v-if进行判断会导致一开始dom没有渲染，等数据加载完成才会渲染dom

若是使用v-if会导致swiper初始化不成功

new Swiper('.swiper-container', {
      mode: 'horizontal',
      freeMode : true,
     	slidesPerView: 2,
      slidesPerGroup: 2,
      touchRatio: 1,
      longSwipesRatio:0.1,
      threshold: 10,
      observer: true,
      observeParents: true,
      loop: true
 })

二、横向滚动问题

在写swiper横向滑动时会出现卡顿，没办法连续问题后来查找发现freeMode这个属性可以实现连续滑动不间断
observer: true,
observeParents: true,
这两个属性可以避免卡顿现象