关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果)

本文主要是介绍关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

维护公司老项目,发现问题,记录一下~ 

1.产生原因

owl 已经实例已经存在,在ajax请求成功后并更改完页面数据后, 但是没有销毁之前实例,并重新生成新的实例,导致没有owl插件没有轮播效果.

2.解决方案

html:

<div class="owl-slider ps-carousel" data-owl-auto="true" data-owl-loop="true" data-owl-speed="7500" data-owl-gap="30"data-owl-nav="true" data-owl-item="3" data-owl-item-xs="1" data-owl-item-sm="2" data-owl-item-md="3"data-owl-item-lg="3" data-owl-duration="1000" data-owl-mousedrag="false" id="carousel-featured-properties"><div class="ps-project ps-project--grid"><div class="ps-project__thumbnail"><div class="ps-project__image"><img src="../img/property/1.jpg" alt="" id="img0" /></div><aclass="ps-project__overlay" id="detail0"></a><div class="ps-project__actions"><a href="javascript:void(0)" style="float: right"><iclass="lnil lnil-star-fill active"></i></a></div></div><div class="ps-project__content"><h4 class="ps-project__name"><a id="name0">房屋名称111</a></h4><p class="ps-project__address" id="address0">上海市,闵行区,浦秀路</p><p class="ps-project__price"><strong id="price0">¥2,0000/月</strong></p><div class="ps-project__meta"><figure><figcaption>房产经济人</figcaption><p id="agent0">张三</p></figure><figure><figcaption>状态</figcaption><p id="state0">出售</p></figure><figure><figcaption>时间</figcaption><p id="build0">7/4/2021</p></figure></div><div class="ps-project__services"><p><span id="arce0"><i class="lnil lnil-size"></i>250 ㎡</span></p><p><span id="bedroom0"><i class="lnil lnil-hospital-bed"></i>3 卧室</span></p><p><span id="bathroom0"><i class="icon icon-bathtub"></i>2 浴室</span></p></div></div></div><div class="ps-project ps-project--grid">//第二个</div><div class="ps-project ps-project--grid">//第三个</div><div class="ps-project ps-project--grid">//第四个</div></div>

js:

success: function (result) {
// alert("查找成功");
//console.log(result)
var allHouse = result.data;
$("#carousel-featured-properties").trigger("destroy.owl.carousel")
$("#carousel-featured-properties").html("");// $("#testId").html('<div class="owl-slider ps-carousel" data-owl-auto="true" data-owl-loop="true"data-owl-speed="7500" data-owl-gap="30" data-owl-nav="true" data-owl-item="4" data-owl-item-xs="1"data-owl-item-sm="2" data-owl-item-md="3" data-owl-item-lg="3" data-owl-duration="1000" data-owl-mousedrag="false"id="carousel-featured-properties"></div>');
$(allHouse).each(function (index,house1){
var house = house1.bHouse;
var image = house1.image;
var agents = house1.agents;// 第二种写法,但是无轮播效果
var div = ' <div class="ps-project ps-project--grid">\n' +' <div class="ps-project__thumbnail">\n' +' <div class="ps-project__image"><img src="'+image[0].imageUrl+'" alt="" id="img0" /></div><aclass="ps-project__overlay" id="detail0"></a>\n' +' <div class="ps-project__actions"><a href="javascript:void(0)" style="float: right"><iclass="lnil lnil-star-fill active"></i></a></div>\n' +' </div>\n' +' <div class="ps-project__content">\n' +' <h4 class="ps-project__name"><a id="name0">'+house.houseName+'</a></h4>\n' +' <p class="ps-project__address" id="address0">'+house.address+'</p>\n' +' </p>\n' +' <div class="ps-project__meta">\n' +' <figure>\n' +' <figcaption>房产经济人</figcaption>\n' +' <p id="agent0">'+agents.name+'</p>\n' +' </figure>\n' +' <figure>\n' +' <figcaption>状态</figcaption>\n' +' <p id="state0">'+house.state+'</p>\n' +' </figure>\n' +' <figure>\n' +' <figcaption>时间</figcaption>\n' +' <p id="build0">'+house.buildTime+'</p>\n' +' </figure>\n' +' </div>\n' +' <div class="ps-project__services">\n' +' <p><span id="arce0"><i class="lnil lnil-size"></i>'+house.area+' ㎡</span></p>\n' +' <p><span id="bedroom0"><i class="lnil lnil-hospital-bed"></i>'+house.bedroom+' 卧室</span></p>\n' +' <p><span id="bathroom0"><i class="icon icon-bathtub"></i>'+house.bathroom+' 浴室</span></p>\n' +' </div>\n' +' </div>\n' +' </div>';$(".owl-slider").append(div);});$(".owl-slider").owlCarousel({
items: 3
});},
error: function (){
alert("查询失败");
}
重点:

 先销毁实例 再插入数据 再生成实例

//销毁实例代码
$("#carousel-featured-properties").trigger("destroy.owl.carousel")
//生成实例代码
$(".owl-slider").owlCarousel({});

这篇关于关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/208058

相关文章

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN