滑块只是在第一页（jQM）上工作，但在第二页，第三页和第二页上都失败了
大家好，我在JQM多页文档上遇到Swiper问题。
我在JQM项目中使用了http://www.idangero.us/sliders/swiper/的Swiper。
我可以在我的Multipage JQM文档结构的第一页上显示幻灯片并正常工作。但是，当我尝试将滑块放到第一页以外的其他JQM页面时，幻灯片将会加载和显示＆＃39;但是＆＃39;不能正常工作＆＃39;。
无法正常工作的说明： 加载错误会导致整个滑块的宽度不正确，内容/列表未完全加载且滑动手势无法正常工作，如当向左/向右滑动时，它应该在每张幻灯片处停止。
请帮助，谢谢。
以下两个示例，首先我在JQM文档的第一页上加载Swiper并按原样运行：
以下是工作滑块的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 for Not-Working Slider [第2页]： http://jsfiddle.net/jgYGJ/8/
将Swiper DIV移至第二页后，未在下一页上工作：
<!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启动swiper：
$(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>
1 个答案:
答案 0 :(得分：2)
您需要在pagecontainershow事件中初始化“swiper”。此事件无法绑定到特定页面，因此您需要检索活动页面的ID，并将其与包含“swiper”的页面的ID进行比较。
将以下代码放在head中，不要将其包含在$(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 1.8.2
- Jquery Mobile滑块不工作JQM 1.3.2和Jquery 1.10.2
- 滑块只是在第一页（jQM）上工作，但在第二页，第三页和第二页上都失败了
- 我的asp页面上的滑块无法正常工作!!只有两个文本框
- JQM - $ .mobile.pagecontainer不在内部页面上工作但在外部页面上工作
- 将CropIt与jQuery Mobile一起使用：如果滑块不在第一个jQm页面上，它就不起作用
- 仅在第一页，JQM和Phonegap上触发了pageshow
- 为什么我的第一个jqm程序无效
- Bootstrap 4 - 中心只有两张卡（不是三张，只有两张）
- 列总和（显示在页面页脚中）在第一页上不起作用。但是在第二页上工作
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？