Question

在Mongo，Bottle设置中，我使用了几个Idangerous垂直的swiper流，每个都在彼此之下。我使用Ajax jQuery来加载更多内容但是我有问题reInit（）swiper导致新内容跳转到浏览器窗口调整大小。

我已阅读此帖子idangerous swiper issue with dynamic content，但无法理解如何正确实施reInit。

任何指针都非常赞赏。

$(function(){
var mySwiper=$('.thumbs-cotnainer').each(function(){
    $(this).swiper({ 
        slidesPerView:'auto', 
        offsetPxBefore:5,
        offsetPxAfter:10,
        calculateHeight:true,   
        grabCursor: true
    });
  });
});


function fetch_stream_more(arti_type) {
var eurl = {arti_type: arti_type};

$.ajaxSetup({
    headers: { "cache-control": "no-cache" }
});

$.ajax({
    dataType: 'jsonp',
    data: eurl,
    type: 'GET',
    url: '/more_in_stream/' + arti_type + '/rdKh3dC5sYfNuoiv07Ka',
    jsonpCallback: "rdKh3dC5sYfNuoiv07Ka",
    success: function (data) {
        $("#" + arti_type).load("add_more.tpl");
        $("#" + arti_type).before(data[0]['more_streams_r']);
    },
    init: function reinitSwiper(swiper) {
        setTimeout(function () {
            mySwiper.reInit();
            }, 500);
    },
    error: function(jqXHR, textStatus) {
        alert("this failed");
    }
});
}

这里的参考是一个html示例，用于显示一个（几个）水平滑动。

<!--stream by specific arti-type-->
<div class="swiper-container thumbs-cotnainer border-gradient">
<div class="thumbs-title">Products</div>
<div class="swiper-wrapper">
%artiType = "product"
%for entry in myentries:
%if entry['arti_type']==artiType:
<div class="swiper-slide">
<!--sort media after rank and show only first ranked media-->
%if entry['media']: 
%media = entry['media']
%sorted_media = sorted(media, key=lambda m:m['rank'])
%first_media = sorted_media[0]
<a href="/{{entry['permalink']}}"><img src='/images/{{first_media['media_id']}}/105/140' alt='{{first_media['caption']}}'>
<div class="thumbs-gradient">
<div class="thumbs-headline">{{entry['title']}}</div>
</div></a>
%else:
<a href="/{{entry['permalink']}}" >
<div class="thumbs-gradient-noimage">
<div class="thumbs-headline-noimage">
<div class="noimage">{{entry['title']}}</div>
<div class="noimage-intro" id="dot1">{{entry['intro']}}</div>
</div></div></a>
%end
</div>
%end
%end
<div id='{{artiType}}'></div>
<!--add_more.tpl need to go here-->
<div class="swiper-slide">
<img src='/static/load_more.png' onclick="fetch_stream_more('{{artiType}}')" alt='more'>

Answer 1

修复此问题并更新答案。在成功中做了一个 reinitSwiper（）; 然后是swiper脚本如下：

var mySwipers = [];

function reinitSwiper() {
  $.each(mySwipers, function(index, swiper){
  swiper.reInit();
  });
}

$(function(){
  mySwiper=$('.thumbs-cotnainer').each(function(){
    var swiper = $(this).swiper({ 
        slidesPerView:'auto', 
        offsetPxBefore:5,
        offsetPxAfter:10,
        calculateHeight:true,   
        grabCursor: true
    });
    mySwipers.push(swiper);
  });
});

使用Idangerous在动态加载后实现reInit（）

1 个答案: