Question

我正在使用Swiper by idangero.us和Jquery Mobile ...

这里我使用 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' 
            }
        })  
     })

Answer 1

工作示例：http://jsfiddle.net/Gajotres/B7hwh/

首先让我告诉你我做了什么。文档就绪（或其匿名版本）不应与jQuery Mobile一起使用，因为它在页面初始化期间不会正确触发。通常这不是问题，但在这里。

因为你需要它在某个页面内初始化我已经删除了文档并用正确的页面事件替换它。我还将你的代码包装成HTML和BODY标签，如果没有它，我就无法在jsFiddle中使用页面事件。

另一个变化，因为每次重新访问页面时都会触发pageshow我已经使用if来检查swiper是否已经应用了它的代码。我无法使用其他页面事件，因为swiper需要正确的页面宽度和高度，并且这些信息只能在pageshow事件期间成功计算。

工作示例：http://jsfiddle.net/Gajotres/B7hwh/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</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=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   
    </head>
    <body>
        <div data-role="page" id="page">
            <div data-role="header">
                <h1>Page One</h1>              
            </div>
            <div data-role="content">
                <a href="#slider" data-transition="slide" data-role="button">Go to Slider</a>
            </div>
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>

        <div data-role="page" id="slider">
            <div data-role="header" data-position="fixed">
                <a href="#page" class="ui-btn-left">Back</a>
                <h1>Page One</h1>
            </div>
            <div data-role="content">
                <div role="main" class="main">
                    <div class="swiper-container swiper-scroll-container">
                        <div class="swiper-wrapper" >
                            <div class="swiper-slide" style="background:#fff; padding:20px">
                                <div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">
                                    <p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>
                                </div>
                                <div style="width:300px; float:left; margin-left:20px">
                                    <p>Here goes some text</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>
                                    <p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>
                                </div>
                                <div style="width:500px; float:left; margin-left:20px">
                                    <p>Here goes wide image</p>
                                    <p><img src="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28_n.jpg" /></p>
                                </div>
                                <div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px">
                                    <p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-scrollbar"></div>

                    </div> 
                </div>
                <div data-role="footer" data-position="fixed">
                    <h4>Page Footer</h4>
                </div>
            </div>
        </div>    
    </body>
</html>

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;

    }

Answer 2

一个更简单的解决方案对我有用，就是创建一个最小的JQuery Mobile页面div，里面是一个简单的iframe，使用src =＆＃34;＆＃34;链接到复杂的滑块页面。这样滑块DOM就与主应用程序分开，它也可以在JQM对话框等内部工作。

Answer 3

我认为还有一些 jquery ui 库会影响移动设备上的 swiper。我通过添加延迟解决了。

setTimeout(() => {
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}, 250);

Swiper无法在Jquery Mobile中工作

3 个答案: