Swiper无法在Jquery Mobile中工作
我正在使用带有Jquery Mobile 的idangero.us的Swiper …
在这里我使用Scroll Container Swiper作为内容滑块……
只是面对将代码嵌入到一起的很多问题……
http://jsfiddle.net/keuKu/4/embedded/result/
滚动条没有显示为演示中的滚动条,滚动条也没有粘贴到我留下的标记处…
$(function(){ /* Scroll container: */ var sScroll = $('.swiper-scroll-container').swiper({ scrollContainer : true, scrollbar : { container : '.swiper-scrollbar' } }) })
工作示例: http : //jsfiddle.net/Gajotres/B7hwh/
首先让我告诉你我做了什么。 文档就绪(或其匿名版本)不应与jQuery Mobile一起使用,因为它在页面初始化期间不会正确触发。 通常它不是问题,但在这里。
因为你需要它在某个页面内初始化我已经删除了文档并用正确的页面事件替换它。 我还将你的代码包装成HTML和BODY标签,如果没有它,我无法在jsFiddle中使用页面事件。
另一个变化,因为每次重新访问页面时都会触发pageshow我已经使用过if来检查swiper是否已经应用了它的代码。 我无法使用其他页面事件,因为swiper需要正确的页面宽度和高度,并且这些信息只能在pageshow事件期间成功计算。
工作示例: http : //jsfiddle.net/Gajotres/B7hwh/
HTML:
jQM Complex Demo Back Page One
Page Footer
Javascript:
$(document).on('pageshow', '#slider', function(){ /* Scroll container: */ if($('.swiper-scroll-container .swiper-scrollbar-cursor-drag').length == 0) { var sScroll = $('.swiper-scroll-container').swiper({ scrollContainer : true, scrollbar : { container : '.swiper-scrollbar' } }); } });
CSS:
.swiper-scrollbar { width: 100%; height: 4px; border-radius: 10px; position: absolute !important; left:0; bottom:auto; top:0 !important; -ms-touch-action: none; background: none } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0,0,0,0.5); border-radius: 10px; }
一个更简单的解决方案对我有用,就是创建一个最小的JQuery Mobile页面div,里面是一个简单的iframe,使用src =“”链接到一个复杂的滑块页面。 这样滑块DOM就与主应用程序分开,它也可以在JQM对话框等中运行。