5

我正在使用idangero.us 的 Swiper和 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' 
            }
        })  
     })
4

3 回答 3

7

工作示例：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;

    }
于 2013-05-13T13:46:08.307 回答
1

一个对我有用的更简单的解决方案是制作一个最小的 JQuery Mobile 页面 div，其中包含一个普通的 iframe，它使用 src="" 链接到一个复杂的滑块页面。这样，滑块 DOM 与您的主应用程序是分开的，它也可以在 JQM 对话框等中工作。

于 2014-04-25T19:24:13.033 回答
0

我认为还有一些 jquery ui 库效果可以在移动设备上滑动。我解决了增加延迟。

setTimeout(() => {
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}, 250);
于 2021-04-06T12:27:51.890 回答