JqueryMobile中的水平滚动和垂直滚动[关闭]

Posted 2023-05-08

【中文标题】JqueryMobile中的水平滚动和垂直滚动[关闭]

【英文标题】：Horizontal scrolling and vertical scrolling in JqueryMobile [closed]

【发布时间】：2014-01-01 03:22:30

【问题描述】：

我想用垂直滑动实现水平滚动。如下图所示。

为了做同样的事情，我搜索并找到了这个http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html 但是这个博客中写的代码对我来说没有意义。

我还下载了http://www.idangero.us/sliders/swiper/提供的demo，并尝试根据我的需要进行修改。但不能做同样的事情。 如果有人有想法或链接或演示项目，请帮助我。 问候！

【问题讨论】：

你在寻找横向和纵向结合在一起的吗？

@Omar ：是的，和你想的完全一样。

@Will 等。这个问题不是题外话。用户已经展示了对该问题的一些调查。尽管对该技术的了解有限。

【参考方案1】：

更新

我做了一些重大修改，可以更好地控制触摸事件。您现在可以为 X 轴和 Y 轴设置触摸持续时间、距离和阈值的最小/最大值。

此外，图像现在已预加载，以使图像之间的过渡更加顺畅。

---

我已经根据触摸事件touchstart 和touchend 在水平和垂直方向上编写了这个相当复杂 的代码。代码捕获触摸事件，然后将它们解释为滑动 up、right、down 和 left。

图像根据滑动方向与.animate() 交换。 向上和向左滑动，加载array中的下一张图片； down 和 right 加载以前的。

它有点冗长，并且有太多的改进空间。例如，您可以计算两个事件 touchstart 和 touchend 之间经过的时间，以确保触摸足以触发自定义滑动。

我将通过代码的主要部分进行更多解释。

HTML

<div class="wrapper">
  <div class="inner">
    <!-- images go here -->
   </div>
</div>

---

CSS

包装器 - height 和 width 应根据您的需要进行调整：

.wrapper 
  overflow: hidden;
  position: relative;
  height: 200px;
  width: 400px;
  margin: 0 auto;

内部包装器 - 将图像附加到：

.inner 
  height: 200px;
  width: auto;
  position: absolute;
  left: 0;
  white-space: nowrap;

Transition wrappers - 用于图像过渡in 和out：

.holder, .in, .hidden 
  position: absolute;

隐藏预加载的图片：

.hidden 
  display: none;

---

JS

变量和默认值：

var total = images.length - 1, /* images total number */
    current = 0,               /* image's index */
    startX = '',               /* touchstart X coordinate */ 
    startY = '',               /* touchstart Y coordinate */
    endX = '',                 /* touchend X coordinate */
    endY = '';                 /* touchend Y coordinate */
    swipeDuration = 1000,      /* max touch duration */
    swipeDistanceX = 50,       /* X-axis min touch distance */
    swipeDistanceY = 50,       /* Y-axis min touch distance */
    thresholdX = 30,           /* X-axis max touch displacement */
    thresholdY = 30;           /* Y-axis max touch displacement */

预加载图片：

将每一个包裹在holder 中，然后将它们附加到inner div、pageinit 事件或任何其他jQM page events。

$(document).on("pageinit", "#gallery", function () 
    $.each(images, function (i, src) 
        $("<div class='holder hidden'><img src=" + src + " /></div>").appendTo(".inner");
    );
    $(".inner .holder:first-child").toggleClass("visible hidden");
);

Touch事件解读——将Touch事件绑定到innerdiv：

将触摸持续时间和距离添加到比较中。

$(document).on("touchstart", ".inner", function (e, ui) 
    startX = e.originalEvent.touches[0].pageX;
    startY = e.originalEvent.touches[0].pageY;
    start = new Date().getTime(); /* touch start */
).on("touchmove", ".inner", function (e, ui) 

    /* prevent page from scrolling */
    e.preventDefault();

).on("touchend", ".inner", function (e, ui) 
    endX = e.originalEvent.changedTouches[0].pageX;
    endY = e.originalEvent.changedTouches[0].pageY;
    end = new Date().getTime(); /* touch end */
    if ((end - start) < swipeDuration) 
      if (startX > endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) 
        showImg(current, "left");
       else if (startX < endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) 
         showImg(current, "right");
       else if (startY > endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) 
        showImg(current, "up");
       else if (startY < endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) 
        showImg(current, "down");
      
    
);

转场showImg(image index, swipe type)函数：

为动画添加了不透明度。

function showImg(index, type) 
    if (type == "left") 
        current = index;
        if (current >= 0 && current < total) 
            current++;
            var distance = $(".visible").width();
            $(".inner .holder").eq(current).css(
                left: distance
            ).toggleClass("in hidden");

            $(".visible").animate(
                left: "-" + distance + "px",
                opacity: 0
            , 600, function () 
                $(this).toggleClass("visible hidden").css(
                    top: "auto",
                    left: "auto"
                );
            );

            $(".in").animate(
                left: 0,
                opacity: 1
            , 500, function () 
                $(this).toggleClass("in visible");
            );
        
    

    if (type == "up") 
        current = index;
        if (current >= 0 && current < total) 
            current++;
            var distance = $(".visible").height();
            $(".inner .holder").eq(current).css(
                top: distance + "px"
            ).toggleClass("in hidden");

            $(".visible").animate(
                top: "-" + distance + "px",
                opacity: 0
            , 600, function () 
                $(this).toggleClass("visible hidden").css(
                    top: "auto",
                    left: "auto"
                );
            );

            $(".in").animate(
                top: 0,
                opacity: 1
            , 500, function () 
                $(this).toggleClass("in visible");
            );
        
    

    if (type == "right") 
        current = index;
        if (current > 0 && current <= total) 
            current--;
            var distance = $(".visible").width();
            $(".inner .holder").eq(current).css(
                left: "-" + distance + "px"
            ).toggleClass("in hidden");

            $(".visible").animate(
                left: distance + "px",
                opacity: 0
            , 600, function () 
                $(this).toggleClass("visible hidden").css(
                    top: "auto",
                    left: "auto"
                );
            );

            $(".in").animate(
                left: 0,
                opacity: 1
            , 500, function () 
                $(this).toggleClass("in visible");
            );
        
    

    if (type == "down") 
        current = index;
        if (current > 0 && current <= total) 
            current--;
            var distance = $(".holder").height();
            $(".inner .holder").eq(current).css(
                top: "-" + distance + "px"
            ).toggleClass("in hidden");

            $(".visible").animate(
                top: distance + "px",
                opacity: 0
            , 600, function () 
                $(this).toggleClass("visible hidden").css(
                    top: "auto",
                    left: "auto"
                );
            );

            $(".in").animate(
                top: 0,
                opacity: 1
            , 500, function () 
                $(this).toggleClass("in visible");
            );
        
    

---

Demo ⁽¹⁾

^{(1) 在 iPad 2 和 iPhone 5 上测试 - v7.0.4}

【讨论】：

做得很好。我将它与 jquery.touchSwipe.min.js 结合使用以获得更好的滑动检测，效果很好。

@grumpy 我很高兴它对你很有效。如果你是 JS 方面的专家，你可以做一些修改，让它变得更好:)

【参考方案2】：

我目前在工作，所以没有太多时间来解决问题。但创造了两个项目结合起来的小东西。

将水平滚动添加到第 3 页。

http://jsfiddle.net/BL33k/

在 je javascript 中使用了一些荷兰语：

var slideAantal = slides.length; //means slidetotal
var slideBreedte = screen.width; //means slidewidth
var beeldHoogte  = screen.height; //means slideheight
var slideHuidig  = 0; //means currentslide

代码很脏，可能有很多不安全的东西，但现在没有时间去解决这些问题。希望对你有所帮助。

【参考方案3】：

您可以通过简单的 CSS 和一些 DOM 操作来实现这一点http://jsfiddle.net/zTGS9/1/

<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        body 
            margin: 0;
        
        div 
            width: 500px;
            overflow-x: hidden;
        
        ul 
            list-style: none;
            width: 100%;
            padding: 0;
        
        li 
            clear: both;
            white-space: nowrap;
            position: relative;
            height: 200px;
            width: 100%;
            overflow-x: hidden;
            padding: 0;
        
        img 
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
            position: absolute;
            display: block;
            top: 0;
        
        img:nth-of-type(1) 
            left: -700px;
        
        img:nth-of-type(2) 
            left: -300px;
        
        img:nth-of-type(3) 
            left: 100px;
        
        img:nth-of-type(4) 
            left: 500px;
        
        img:nth-of-type(5) 
            left: 900px;
        
        img:nth-of-type(6) 
            left: 1300px;
        

    </style>
    <body>
        <div>
            <ul>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%201/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%202/"/>
                    <img src="http://lorempixel.com/400/200/business/image%203/"/>
                    <img src="http://lorempixel.com/400/200/food/image%204/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%206/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%202/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%203/"/>
                    <img src="http://lorempixel.com/400/200/business/image%204/"/>
                    <img src="http://lorempixel.com/400/200/food/image%205/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%206/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%207/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%204/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%205/"/>
                    <img src="http://lorempixel.com/400/200/business/image%206/"/>
                    <img src="http://lorempixel.com/400/200/food/image%207/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%208/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%209/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%209/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%208/"/>
                    <img src="http://lorempixel.com/400/200/business/image%207/"/>
                    <img src="http://lorempixel.com/400/200/food/image%206/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%204/"/>
                </li>
            </ul>
        </div>
    </body>
    <script>
       var _lis = document.getElementsByTagName('li');
for (var i = 0; i < _lis.length; ++i) 
    _lis[i].addEventListener('mousedown', function(e) 
        if (e.clientX < (this.offsetWidth >> 1)) 
            this.appendChild(this.removeChild(this.firstElementChild));
         else 
            this.insertBefore(this.lastElementChild, this.firstElementChild);
           
    );

    </script>
</html>

没有时间实现触摸事件，但我希望你能明白：)

【讨论】：

这将在 y 中保留设备滚动

【参考方案4】：

你需要为body标签应用内联css。

body
    overflow-x:scroll;
    overflow-y:scroll;

对于 y 滚动，请参阅此 http://sigmamobility.com/examples/appexamples.jsp。 请注意，除非您的控件确实是溢出窗口宽度/高度，否则应用上面不会给出预期的结果。

您可以通过 Sigma Mobility 测试您的代码，它可以创建移动应用并轻松注入内联 css /js 代码以及实时预览。