使用 iDangero.us Swiper 和 jQuery Mobile 时需要刷新页面答案

【问题标题】：Need to refresh page when using iDangero.us Swiper with jQuery Mobile使用 iDangero.us Swiper 和 jQuery Mobile 时需要刷新页面
【发布时间】：2013-09-15 04:07:19
【问题描述】：

我目前正在尝试将 iDangerous Swiper 添加到使用 jQuery Mobile 构建的页面中，但为了显示 swiper，我需要重新加载页面。我见过一些情况，人们对此有一些问题，但他们的解决方案不适用于我下面的问题。

我尝试了几种不同的方法：pageshow、pageinit、pagebeforeshow、mobileinit。还有 trigger("create")、trigger("refresh") 并尝试在 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>

【问题讨论】：

$.mobile.changePage('URL', { reloadPage: true }); 重新加载页面，但仅适用于 URL，即 file.html。不适用于主题标签，即#home。
我试试看。谢谢。

标签： javascript jquery jquery-mobile swiper

【解决方案1】：

你可以试试这个：

$('#productinfo').live('pageinit',function(event){
    swiper function...
});

【讨论】：

【解决方案2】：

我在尝试解决其他问题时遇到了这个问题的解决方案。我正在构建的网站是使用 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; ?>',{

我能够消除重新加载页面的需要。希望对某人有所帮助。

【讨论】：