关于swiper动态加载数据失败滑动失效等问题

最新推荐文章于 2024-06-27 15:08:17 发布

爱吃白米饭的饭饭

最新推荐文章于 2024-06-27 15:08:17 发布

阅读量1.5k

点赞数

分类专栏：前端开发积累文章标签： swiper 动态加载数据

本文链接：https://blog.csdn.net/qq_29954811/article/details/89924219

版权

本文探讨了Swiper在动态加载数据时遇到的问题，如滑动失效，并提供了具体的代码实现片段，包括observer属性的使用以及update()方法在解决这些问题上的作用。update()方法用于更新Swiper状态，包含了多个内部方法的更新功能。

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

具体代码实现片段：

下面展示一些 基础用法和动态加载数据实现方式。

第一步：取数据
第二步：渲染数据
第三步：初始化swiper

// An highlighted block
var slide_pic=[
        {
   
            img:'assets/images/banner1.png',
            link:'https://www.baidu.com/'
        },
        {
   
            img:'assets/images/banner2.png',
            link:'https://www.baidu.com/'
        },
        {
   
            img:'assets/images/banner4.png',
            link:'https://www.baidu.com/'
        }
    ]

    var slide_lists = ''//成功案例展示demo 
    $.each(slide_pic,function(i,e){
   
      slide_lists+='<div class="swiper-slide"><a href="'+e.link+'"><img src="'+e.img+