前言:最近項(xiàng)目中有個(gè)需求,對(duì)一個(gè)幻燈片的區(qū)域內(nèi)容進(jìn)行替換,然后重新渲染;如果用owlCarousel直接去初始化的話會(huì)出現(xiàn)無(wú)法渲染成功的問(wèn)題.(使用的版本是1.3.3)
下面就是實(shí)現(xiàn)的思路:
1.先查看的owlCarousel對(duì)jquery的擴(kuò)展代碼:
$.fn.owlCarousel = function (options) {
return this.each(function () {
if ($(this).data("owl-init") === true) {
return false;
}
$(this).data("owl-init", true);
var carousel = Object.create(Carousel);
carousel.init(options, this);
$.data(this, "owlCarousel", carousel);
});
};
從代碼中可以看出這個(gè)owlCarousel函數(shù)中,先實(shí)例化了一個(gè)Carousel類,并執(zhí)行了其中的init方法,完成幻燈片的初始化,并往當(dāng)前的選擇的元素中用$.data()方法附加了一個(gè)"owl-init"的狀態(tài)和owlCarousel實(shí)例的數(shù)據(jù).
2.查看owlCarousel類:
...
reinit : function (newOptions) {
var base = this,
options = $.extend({}, base.userOptions, newOptions);
base.unWrap();
base.init(options, base.$elem);
},
...
可以發(fā)現(xiàn)這個(gè)owlCarousel類有一個(gè)reinit,既然Carousel類的實(shí)例附加到指定的元素中,那么重新拿到這個(gè)Carousel類實(shí)例就可以調(diào)用這個(gè)reinit方法,實(shí)現(xiàn)將當(dāng)前的元素的幻燈片內(nèi)容重新渲染
3.外部代碼實(shí)現(xiàn)
var shanghuiOwl;
function shanghuiSlide(selector,firstLoad){
var html = '//被替換的內(nèi)容';
$('#owl-demo').html(html);
if(firstLoad){//如果是頁(yè)面第一次打開的話直接調(diào)用owlCarousel實(shí)現(xiàn)初始化
shanghuiOwl = $('#owl-demo').owlCarousel({
items: 1,
autoPlay: true,
});
}else{
shanghuiOwl.data("owlCarousel").reinit({
items: 1,
autoPlay: true,
});
}
}
5.實(shí)現(xiàn)效果
首次加載第一張圖顯示一張貓頭鷹
WX20181119-085542@2x.png
點(diǎn)擊切換之后第一張被換成一張粉色的圖片
WX20181119-085708@2x.png
最后,這就是owlCarousel插件實(shí)現(xiàn)幻燈片內(nèi)容更換后重新渲染的全部經(jīng)過(guò).(ps:查看源碼有時(shí)可以有不一樣的收獲)
