滑块仅在第一页(jQM)上工作，但在第二页，第三页和第三页上均失败 [英] Slider just working on First Page (jQM), but Failed on Page Two, Three and on

查看：85
本文介绍了滑块仅在第一页(jQM)上工作，但在第二页，第三页和第三页上均失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，我对JQM多页文档的Swiper有疑问.

Hello everyone, I have problem with Swiper on JQM multipage document.

我正在通过> http://www.idangero.us/sliders/swiper/使用Swiper 在我的JQM项目中.

I'm using Swiper by http://www.idangero.us/sliders/swiper/ in my JQM project.

我可以在多页JQM文档结构的第一页上显示幻灯片并正常工作.但是，无论何时我尝试将滑块放到首页以外的其他JQM页面上，幻灯片都会加载并显示"，但无法正常工作".

I can have the slide display and working fine on my First Page of my Multipage JQM document structure. But when ever I try to put the slider to other JQM page other than the First Page, the slides 'Will Load and Display' BUT 'Not Working correctly'.

无法正常工作的说明: :加载错误将导致整个滑块的宽度不正确，内容/列表未完全加载以及滑动手势无法正常工作，例如左右滑动/拖曳时，它应该停在每张幻灯片上.

Description of Not Working Correctly: The loading error will cause incorrect width of the whole slider, the content/list not completely loaded and swipe gesture not working correctly, as it should stop at each slide when swipe/drag left-right.

请帮助，谢谢.

以下两个示例，首先，我将Swiper加载到JQM文档的第一页上，并按其应有的方式工作:

The following two example, first I load the Swiper on First Page of JQM document and its working as it should:

这是工作滑块的JSfiddle [第一页] : http://jsfiddle.net/h73k2/11/ 

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/appstore.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
</head>
<body> 

<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page One</h1>
    </div><!-- /header -->

    <div data-role="content">
                <div class="swiper-container featured">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
            </div>
        </div>
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#page2">Page Two</a></p>  
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page Two</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#page1">Back to Page One</a></p>    
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

    <!-- content goes here-->


<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<!-- Don't forget to get the latest Swiper and scrollbar version here-->
<script src="js/idangerous.swiper-2.0.min.js"></script>
<script src="js/idangerous.swiper.3dflow-2.0.js"></script>
<script src="js/appstore.js"></script>
</body>
</html>

JSfiddle(不工作的滑块)[第二页]: 在下一页上不起作用:

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/appstore.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
</head>
<body> 

<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page One</h1>
    </div><!-- /header -->

    <div data-role="content">

        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#page2">Page Two</a></p>  
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page Two</h1>
    </div><!-- /header -->

    <div data-role="content">
                <div class="swiper-container featured">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
            </div>
        </div>
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#page1">Back to Page One</a></p>    
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

    <!-- content goes here-->


<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<!-- Don't forget to get the latest Swiper and scrollbar version here-->
<script src="js/idangerous.swiper-2.0.min.js"></script>
<script src="js/idangerous.swiper.3dflow-2.0.js"></script>
<script src="js/appstore.js"></script>
</body>
</html>

JS发起刷卡: 

$(function(){
    //Featured Slide
    var featuredSwiper = $('.featured').swiper({
        slidesPerView:'auto',
        centeredSlides: true,
        initialSlide:7,
        tdFlow: {
            rotate : 30,
            stretch :10,
            depth: 150
        }
    })

    //Thumbs
    $('.thumbs-cotnainer').each(function(){
        $(this).swiper({
            slidesPerView:'auto',
            offsetPxBefore:25,
            offsetPxAfter:10,
            calculateHeight: true
        })
    })

    //Banners
    $('.banners-container').each(function(){
        $(this).swiper({
            slidesPerView:'auto',
            offsetPxBefore:25,
            offsetPxAfter:10
        })  
    })
})

代码更新: 

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.4.0.min.js"></script>
    <!-- Don't forget to get the latest Swiper and scrollbar version here-->
    <script src="js/idangerous.swiper-2.0.min.js"></script>
    <script src="js/idangerous.swiper.3dflow-2.0.js"></script>
    <!--    <script src="js/appstore.js"></script>-->
    <script>
            $(document).on("pagecontainerbeforehide", function (e, ui) {
            var activeP = ui.nextPage;
            var activeID = ui.nextPage[0].id;
            if (activeID == "page2" && $(".swiper-container", activeP).length === 0) {
                $("body .swiper-container")
                    .removeClass("swiper-hidden")
                    .prependTo($(".ui-content", activeP));
            }
        });
    </script>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/appstore.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
</head>
<body> 

<!-- Start of first page -->
<div data-role="page" id="page1">
    <div data-role="header">
            <h1>Page One</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View Slider on <a href="#page2">Page Two</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="page2">
    <div data-role="header">
            <h1>Page Two</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
        <p><a href="#page1">Back to Page One</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- content goes here-->
<div class="swiper-container featured swiper-hidden">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/1.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/2.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/3.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/4.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/5.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/6.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/7.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/1.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/2.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/3.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/4.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/5.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/6.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/7.jpg)"></div>
    </div>
</div>

</body>
</html>

推荐答案

您需要在pagecontainershow事件上初始化刷卡".此事件无法绑定到特定页面，因此您需要检索活动页面的ID，并将其与包含"swiper"的页面的ID进行比较.

You need to initialize "swiper" on pagecontainershow event. This event cant be bound to a specific page, so you need to retrieve active Page's id and compare it with id of the page containing "swiper".

将以下代码放在head中，不要将其包装在$(function () {});中.

Place the below code in head and don't wrap it in $(function () {});.

$(document).on("pagecontainershow", function () {
    $.mobile.pageContainer.pagecontainer("getActivePage").find('.featured').swiper({
        slidesPerView: 'auto',
        centeredSlides: true,
        initialSlide: 7,
        tdFlow: {
            rotate: 30,
            stretch: 10,
            depth: 150
        }
    });
});

演示

Demo

要检索活动页面的ID 

$(document).on("pagecontainershow", function () {
  /* page's object */
  var active = $.mobile.pageContainer.pagecontainer("getActivePage");
  /* page's id */
  var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
  if( activePage == "targetPageID") {
    $(".featured", active).swiper({
        slidesPerView: 'auto',
        centeredSlides: true,
        initialSlide: 7,
        tdFlow: {
            rotate: 30,
            stretch: 10,
            depth: 150
        }
    });
  }
});

演示

Demo

这篇关于滑块仅在第一页(jQM)上工作，但在第二页，第三页和第三页上均失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆