在html中使用“ UIScrollView”的Web应用程序

问题描述

| 我想制作一个使用\“ UIScrollView \” xcode-function但在html中的webapp。制作一个将一堆图像放在一行中的html页面没有问题。我只想用滑动手势制作一个iphone水平滚动以显示下一张图像。可以做到吗？

解决方法

您需要注意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 web 使用使用使用应用程序

在html中使用“ UIScrollView”的Web应用程序

问题描述

解决方法

相关问答