swiper使用踩坑记录

要实现的效果

点击tab标签页图片对应切换。滑动图片的时候，上面的tab标签页对应高亮

问题归总： 

注：本次踩坑使用的是swiper4版本

1，为什么使用swiper图片无法正常排列而是全部挤在了一起？

原因：结构没有使用正确。

正确方法：

 起初class=“swiper-slide”这个类名是放在了swiper-inner-item下。导致出现以上问题。要严格按照官方swiper-container-->swiper-wrapper--->swiper-slide这个结构来，而且中间不要有断开。swiper4

2 为什么在设置了slidesPerView: 'auto', spaceBetween: 15,属性，图片已经如效果图展示，但是滑动图片到最后一个，其activeIndex却无法走到最后一张的索引。比如本例中五张图片。最后一张得activeIndex=4，但是在切换图片的时候得到的索引永远无法等于4.

解决方案：加上normalizeSlideIndex: false,即可。

 3，只有5张图片，最大索引是4.，图片向右滑动，为何activeindex==4以后,activeIndex还可以等于5.如何让到最后一张后禁止继续向右滑动

解决办法：

当activeIndex==4的时候，添加this.allowSlideNext = false，即可禁止向右滚动

  

二：设置了loop：true，为什么图片没有拼接，比如原本四张图，设置loop:true以后应该可以无限滚动，拼接。（以下实例版本为"swiper": "^8.4.4",vue-awesome-swiper": "^3.1.3）

 <div class="swiper-container" 
               @mouseenter="on_bot_enter"  
               @mouseleave="on_bot_leave"
        >
          <swiper :options="swiperOption" ref="mySwiper"  class="gallery-thumbs" v-if="imgs.length">
              <swiper-slide v-for="(item,index) in imgs" :key="index">
                      <img :src="item"  class="item-img"/>
              </swiper-slide>
          </swiper>
 </div>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
data(){
    return {
        swiperOption: {
            loop: true,
            spaceBetween: 30,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true,
            autoplay: {
              delay: 2000,
              disableOnInteraction: false
        },
      },

    }
}
 methods: {
      on_bot_enter () {
        console.log('enter')
        console.log('--swieer',this.$refs.mySwiper.swiper)
        this.$nextTick(()=>{
          this.$refs.mySwiper.swiper.autoplay.stop()
        })
      },
      on_bot_leave () {
        this.$nextTick(()=>{
          console.log('--swieer',this.$refs.mySwiper.swiper)

          this.$refs.mySwiper.swiper.autoplay.start()
        })
        console.log("leave")
        
      }

  }
</script>
<style>
.item{
  width: 360px;
  height: 240px;
  background: #ccc;
}
.swiper-container{
  overflow-x: hidden;
}
.gallery-thumbs .swiper-slide{
  width: 320px;
  height: 180px
}
.item-img{
  display: block;
  width: 320px;
  height: 220px;
  object-fit: cover;
}



</style>

主要原因： <swiper-slide v-for="(item,index) in imgs" :key="index">
                      <img :src="item"  class="item-img"/>
              </swiper-slide>里我原本用的是el-image，第三方的组件导致直接失效。所以这里是一个坑。只能用img标签。设置完以后图片就正常出现了，不会挤在一起。还有一个就是.gallery-thumbs .swiper-slide 这里的样式swiper-slide一定要设置宽高，否则图片也会挤在一起。.slide是插件本身提供的类名，