在 html 中使用“UIScrollView”的 Webapp答案

【问题标题】：Webapp that uses "UIScrollView" in html在 html 中使用“UIScrollView”的 Webapp
【发布时间】：2011-06-14 11:55:26
【问题描述】：

我想制作一个使用“UIScrollView”xcode 函数但在 html 中的 webapp。

制作一个将一堆图像排成一行的html页面没有问题。我只想用滑动手势制作一个iphone水平滚动以显示下一张图像。

这个可以吗？

【问题讨论】：

你能澄清一下吗？你在做一个网络应用程序（html）吗？还是原生（UIScrollView）？
我想做一个网页应用（html）！ UIScrollView 函数只是我希望它如何工作的参考。

标签： iphone web-applications

【解决方案1】：

您需要注意 touchstart 和 touchend（或 touchmove）来确定方向，然后将图像替换为下一个/上一个。以下是一些链接：

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

未经测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var startX;
var endX;
var pic=0;
var pics = ['pic1.png','pic2.png','pic3.png'];
document.getElementById('picture').setAttribute('src',pics[pic]);

function touchStart(event){
    startX = event.touches[0].pageX;
}

function touchEnd(event){
    endX = event.touches[0].pageX;
    deltaX=endX-startX;
    if(deltaX>0){
        next();
    }
    else{
        prev();
    }
}

function next(){
    pic++;
    if(pic>pics.length){pic--;}
    document.getElementById('picture').setAttribute('src',pics[pic]);
}

function previous(){
    pic--;
    if(pic<0){pic++;}
    document.getElementById('picture').setAttribute('src',pics[pic]);
}
</script>
<style>
#pictureFrame{height:460px; width:320px; top:0; left:0;}
</style>

</head>

<body>
<div id="pictureFrame"><img ontouchstart="touchStart(event);" ontouchend="touchEnd(event);" id="picture"/></div>
</body>
</html>

【讨论】：

不客气。我添加了一些可能有帮助的代码，但我没有对其进行测试，因此您可能需要添加一些 preventDefault（在文档中提到）或其他调试。