swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

Posted 林木慕风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播相关的知识,希望对你有一定的参考价值。

        本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助。
        首先,new Swiper的初始化最后放在DOM后边,即加载完<div class="swiper-container"></div>后立即初始化,如果不能写在html内容的后面,则需要在页面加载完成后再初始化:如放在window.onload = function() {
...}中或$(document).ready(function () {...})中,如果是动态数据加载,应该放在接口取值生成DOM后马上初始化。

        下面是个两个问题
        其一:(使用Swiper轮播插件ajax请求加载图片时,无法滑动的问题),最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的。

        observer:true,//修改swiper自己或子元素时,自动初始化swiper
        observeParents:true,//修改swiper的父元素时,自动初始化swiper

        项目中引用了vue,banner图是后台配置的,ajax请求后台接口数据后生成的,将var mySwiper = new Swiper(".swiper-container",{})放在了请求成功的代码块中,代码如下:

vm.swiper = new Swiper(‘.swiper-container‘, {
    pagination: ‘.swiper-pagination‘,
    paginationClickable :true,
    centeredSlides: true,
    autoplay: 5000,
    autoplayDisableOnInteraction: false,
});

        但是轮播图页面刷新后不会自动播放,且小圆点分页器只显示1个,这个bug后来通过observer:true添加这个属性完美的解决了。原因是因为banner图是动态创建的,在插件开始初始化时,文档流中没用图片,所以没有创建相应宽度,通过调整js加载顺序,问题是解决不了的。

 

以上是关于swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播的主要内容,如果未能解决你的问题,请参考以下文章

求助:swiper轮播图插件设置 slidesPerColumn之后顺序的问题

在Vue中使用Swiper轮播图同时解决点击轮播图左右切换按钮不生效的问题同时将轮播图抽离出为一个公共组件

swiper做轮播图

swiper轮播图自动播放速度太快

vue_cli轮播图--swiper插件

Swiper动态获取数据后轮播图播放问题