我目前正在尝试将iDangerous Swiper添加到使用jQuery Mobile构建的页面中,但为了显示swiper,我需要重新加载页面。我见过一些人们遇到过这些问题的例子,但他们的解决方案对我的问题不起作用。
我尝试了几种不同的东西:pageshow,pageinit,pagebeforeshow,mobileinit。还触发(“创建”),触发(“刷新”)并尝试在jQuery Mobile js之前或之后添加脚本。
我目前正在使用jQuery Mobile 1.4.1 alpha 2和Swiper 2.1.0。
我的问题:为了使脚本能够正常工作以及上面哪个页面事件可以解决问题,脚本的正确顺序是什么?谢谢你的时间。
我的swiper HTML如下:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="picture"><img src="image1.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " id="productImage" /></div>
</div>
<div class="swiper-slide"><div class="picture">
<img src="image2.jpj" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
</div></div>
<div class="swiper-slide"><div class="picture">
<img src="image3.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
</div></div>
</div>
</div>
我的jQuery和jQuery Mobile文件已加载到页面底部。
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.min.js"></script>
<script>
$(document).on('pagecreate', function(){
$( "#leftPanel" ).trigger( "updatelayout" );
$.mobile.defaultDialogTransition = 'slide';
$.mobile.defaultPageTransition = 'slide';
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
</script>
<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.mobile-1.4.0-alpha.2.min.js"></script>
<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/boilerplate/helper.js"></script>
<script>
$('#productinfo').on('pageshow', function() {
var mySwiper = new Swiper('.swiper-container',{
centeredSlides: true,
slidesPerView: 2,
watchActiveIndex: true
});
});
</script>
答案 0 :(得分:0)
你可以尝试这个:
$('#productinfo').live('pageinit',function(event){
swiper function...
});
答案 1 :(得分:0)
我在尝试解决其他问题时遇到了这个问题的解决方案。我正在构建的网站是使用php生成的。 html已经嵌入,因此所有产品信息页面都具有#product_info的相同ID,并且包含swiper的div始终具有#product_image的id。通过向id #product_image添加php函数,例如:
#product_image<?php echo $product_id; ?>
并给予swiper与
相同的内容var mySwiper = new Swiper('#product_image<?php echo $product_id; ?>',{
我能够消除重新加载页面的需要。希望有所帮助。