swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

墨蓝 2023-05-31 03:08 12阅读 0赞

使用swiper.js做一些动效时，如果进行了ajax，并且重新把DOM写入到HTML代码中，会导致swiper.js的特效消失的问题、原因是ajax加载后，原先new 的Swiper对象，不认识新来的DOM对象，所以要把ajax之后的DOM也绑定到swiper的事件，就得重新声明Swiper对象，也就是重新声明Swiper对象。

1.在动态获取数据后马上对swiper进行初始化

$.ajax({
        type:"get",
        url:finalUrl,
        dataType:"json",
        success:function(data){
            $("#reportList").empty();
            for(var i=0;i<reportLength;i++){
                var url="'"+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'";
                reportHtml+='<div class="swiper-slide report-item" οnclick="reportJump('+url+')">'
                    +'<div class="item-title">'+data.resp[i].title+'</div>'
                    +'<div class="item-content">'+data.resp[i].content+'</div>'
                    +'<div class="item-date">'+data.resp[i].createTime+'</div>'
                +'</div>';
            }
            $("#reportList").append(reportHtml);
            var swiper = new Swiper('.swiper-container', {
                slidesPerView : 3
            });
        }
    });

# 总的来说，把那段执行的代码放到ajax中，不要放到其他里面即可 #

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

使用swiper.js做一些动效时，如果进行了ajax，并且重新把DOM写入到HTML代码中，会导致swiper.js的特效消失的问题、原因是ajax加载后，原先new 的Sw

墨蓝/ 2023年05月31日 03:08/ 0 赞/ 13 阅读

相关 ajax html css 失效,关于 ajax 动态返回数据 css 以及 js 失效问题

ajax 毕竟是异步的所以动态加载出来的数据难免遇到 css 或者 js 失效的问题，所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js

末蓝、/ 2022年10月06日 10:53/ 0 赞/ 344 阅读

相关获取动态加载ajax的数据

get\_info import re import urllib2 import json import pandas as pd

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 02:53/ 0 赞/ 220 阅读

相关 swiper支持动态加载数据

用swiper插件动态加载数据：动态获取完数据之后，在初始化swiper. 1、在<head>标签里面加入swiper的css和js文件 <link re

淡淡的烟草味﹌/ 2022年06月01日 08:21/ 0 赞/ 964 阅读

相关 mui-numbox动态加载失效

mui-numbox的组件在获取数据后加载出来后，＋和－无效，可能是因为mui组件初始化的问题，可能只要不是在mui.plusReady中初始化的多个组件，只能自己手动初

柔光的暖阳◎/ 2022年04月10日 07:11/ 0 赞/ 246 阅读

相关 swiper的图册滑动效果

首先，我们要做的效果是这样子的！！~~ ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

柔情只为你懂/ 2022年04月04日 12:25/ 0 赞/ 438 阅读

相关 Echarts 图表数据通过 Ajax 动态加载

一、介绍 Echarts 配合使用 Ajax 进行数据的动态加载，主要解决了加载一次页面只能加载一次图表的问题，其次在动态加载时衔接合理。二、HTML代码

╰+哭是因爲堅強的太久メ/ 2022年03月26日 06:55/ 0 赞/ 665 阅读

相关 Echarts通过Ajax实现动态数据加载

Echarts通过Ajax实现动态数据加载用jquery的ajax来异步加载echarts图表数据，下面已一个简单的饼状图为例： ------------------

忘是亡心i/ 2022年02月14日 08:35/ 0 赞/ 310 阅读

相关 Ajax加载数据中的loading效果

如题，不难理解，故不多做介绍，直切主题。在html任意位置放置loading图标： <div id="cisLoading"> <img src="/s

深碍√TFBOYSˉ_/ 2022年02月01日 00:06/ 0 赞/ 456 阅读

相关 swiper ajax动态获取数据，轮播图播放问题

解决方案一: 在new swiper时，添加两个属性: observer:true,//修改swiper自己或子元素时，自动初始化swiper ob

深碍√TFBOYSˉ_/ 2021年07月24日 14:56/ 0 赞/ 476 阅读