Question

我想创建一个使用“UIScrollView”xcode-function但在html中的webapp。

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

可以这样做吗？

Answer 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>

在html中使用“UIScrollView”的Webapp

1 个答案: