vue使用swiper动态加载且使用懒加载，轮播显示白屏问题

最新推荐文章于 2023-10-13 17:38:06 发布

weixin_30418341

最新推荐文章于 2023-10-13 17:38:06 发布

阅读量1.4k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanhanours/p/10792284.html

版权

在Vue项目中使用swiper动态加载数据时，遇到轮播显示白屏的问题。通过在Vue的mounted生命周期钩子中初始化Swiper，并在获取到轮播数据后重新初始化。同时，结合VueLazyload进行图片懒加载，为解决第一张图片在无限轮播后显示空白，对首尾两张图片不使用懒加载，其余使用。参考了相关博客文章的解决方案。

摘要由CSDN通过智能技术生成

Vue使用swiper动态加载数据，动态轮播数据显示白屏问题处

公司临时需要配合安卓ios提供一个页面其中用到轮播懒加载等

为了省点事我引了vue.js写的没想到有一堆的bug 只好来查解决方案了

1.引进swiper.js swiper.css

(我用的是3.4.2版本的（建议），经自己测试 4.0版本或者2.0版本的swiper写到页面中不轮播或者加载不到相应的js,css 具体为什么不能用我也没找到根本原因可能是我比较菜的缘故哈哈)

如果是vue-cil整个项目使用vue-awesome-swiper会比较多

npm i swiper@3.4.2 -S
//
npm install vue-awesome-swiper --save

2.HTML

 <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 class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button