jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何重新渲染猫头鹰轮播项目?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
好吧,我现在正在使用 owl-carousel-2插件.

我遇到以下问题:

标记代码

<div class="owl-carousel" style="display: none;">
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <!-- ... -->
    <div class="item"><img src="..." /></div>
</div>

<script>
$(function() {
    var $owl = $('.owl-carousel');
    $owl.owlCarousel();

    // Doing many things here.

    $owl.show();
});
</script>

问题是:

当我用$owl.owlCarousel()初始化时;声明,在隐藏状态下,其大小未初始化.

因此,当我显示该控件时,控件显示一团糟!

但是当我调整窗口大小时,它似乎触发了重新渲染.控件呈现内容,然后显示良好.

所以我想知道是否有办法在它上面触发这种重新渲染(或刷新)方法.

为了确保控件不会显示一团糟.

我试图阅读文档和来源,但还没有一个很好的解决方案.

请帮忙.

解决方法

发现了一个丑陋,肮脏的解决方案.无论如何,它工作:

主要程序:

>摧毁猫头鹰 – 旋转木马.
>手动将标记更改为初始状态.
>初始化猫头鹰轮播.

var $owl = $('.owl-carousel');
$owl.trigger('destroy.owl.carousel');
// After destory,the markup is still not the same with the initial.
// The differences are:
//   1. The initial content was wrapped by a 'div.owl-stage-outer';
//   2. The '.owl-carousel' itself has an '.owl-loaded' class attached;
//   We have to remove that before the new initialization.
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$owl.owlCarousel({
    // your initial option here,again.
});

它工作,但是这么脏.希望看到一个更好,更整洁的解决方案.

大佬总结

以上是大佬教程为你收集整理的jquery – 如何重新渲染猫头鹰轮播项目?全部内容,希望文章能够帮你解决jquery – 如何重新渲染猫头鹰轮播项目?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。