vue-awesome-swiper4.1.1版本lazy不生效问题（autoplay等同理）

huoyou123

已于 2022-09-18 22:23:06 修改

阅读量764

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-18 22:22:25 首次发布

本文链接：https://blog.csdn.net/weixin_43404937/article/details/126924084

版权

vue-awesome-swiper4.1.1版本lazy不生效问题（autoplay等同理）

先说下本人的依赖版本，swiper6.8.4，vue-awesome-swiper4.1.1。
在解决这个问题之前，在网上查了很多资料，普遍反应是vue-awesome-swiper4.1.1版本的bug，都推荐降为3.1.5版本。但是降为3.1.5意味着swiper也要降到5或者4，语法变动太大，项目中已经大量使用了swiper，修改成本太大，遂放弃该方案。

html部分

<div class="swiper">
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide v-for="item in list" :key="item.id">
      <div class="swiper-item">
        <img :data-src="item.src" class="swiper-img swiper-lazy" alt="" />
      </div>
    </swiper-slide>
  </swiper>
</div>

js部分

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
import Swiper2, { Lazy } from 'swiper';
Swiper2.use([Lazy]);
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 2 // 默认 1
        }
      }
    };
  }
};
</script>