ZingTouch:如何用鼠标和手指滑动手势调用不同的URL

Question

我想实现一个方法，通过鼠标或手指手势调用下一个或上一个页面(即不同的URL(。

去年，我用jquery和jquery mobile实现了一个解决方案，但这并没有让我满意。ZingTouch看起来很有前途，但他们的Swipe手势没有提供swipeleft或swiperight方法。

也就是说，我不知道该如何处理他们的任何方法。一个代码示例会很有帮助。

Answer 1

我终于在ZingTouch的一个封闭问题中找到了一个非常有用的例子：https://github.com/zingchart/zingtouch/issues/14这立即导致了解决方案(向markadrake和mike schultz致敬(。

TL；DR

关键是使用Pan，而不是Swipe，并使用angle。

let angle = e.detail.data[0].directionFromOrigin;

我不知道该怎么处理e.detail.data，所以我想我自己也没有机会找到解决方案。

完整示例

为了了解整个过程并展示响应式图像设计，我将进行详细说明。

通过鼠标或手指滑动以调用下一个/上一个的响应式图像设计

我想浏览的每一页顶部都有一个突出的图像。此图像的大小将自动调整为与视口最佳匹配，并且在调整视口大小时将调整大小。

用鼠标或手指向左或向右滑动此图像将调用下一页或上一页。这就是需要解决的问题。

CSS

.responsive {
width:auto;
height:auto;
max-width:100%;
max-height:87vh;
}

这是浏览器发挥魔力并根据需要调整图像大小的触发器。

PHP

在2007年的这个项目中，我有一个通用函数img($path, $url='', $scale='')，它为所有图像生成html代码。它将图像路径$path和最终的$url作为参数，以使其可点击并调用另一个页面。

正如所看到的，我最初实现了一个缩放函数，但我们今天可以做得更好。对原始代码的更改是最小的。

添加响应式图像设计

所讨论的页面都使用全局变量$single，该全局变量包含主图像的ID。该ID也是URL的path。

$single用于实现右侧的responsiveimg html，而不是页面上过多的其他图像(wp_sp只是strpos的懒惰助手函数，用于处理0/false区分(：

$responsive = $single           # we look for a page having a main image (there are many others with images)
&& wp_sp($path, $single)    # this function call is for the image we look for, not for others on this page
? " class='responsive' "
: '';

因此，如果$responsive不为空，我们用classresponsive对要用该滑动功能增强的图像进行分类。

此外，我们还需要确保图像的尺寸是响应自适应的最佳尺寸：$path_1600是$path的变体(即给定的图像路径(，指向图像的大版本，具有1600px宽度。

$dim = getImageSize($_SERVER['DOCUMENT_ROOT'] . substr($path_1600, 1)); 

此变量$responsive被添加到HTML代码中，无论是否为空：

$img = "<img src='$path' "
. str_replace('"', "'", $dim[3])
. $responsive
. " border=0 alt='$altText'>";

HTML代码段与CSS相结合，负责主图像的全面呈现。

魔术！太棒了！在浏览器级别解决了问题。不再有笨拙的变通方法和昂贵的人工缩放。

现在，这个图像必须填充滑动功能。

添加滑动

为了知道滑动功能应该在哪里触发，我对符合滑动条件的图像使用div，即我们的主图像：

if ($responsive) {
$img = "<div id='swipe_here'>$img</div>";
}

以下代码来自footer.php，并通过ZingTouch将此功能优雅地实现到divswipe_here。

$n和$p是下一个或前一个图像的ID，是URL的path，因此使用Javascript:重定向很容易

echo '
<script src="https://cdnjs.cloudflare.com/ajax/libs/zingtouch/1.0.6/zingtouch.min.js" integrity="sha512-HmaXasRYOQJEXJWYwYCMcIA/XnPtW9WPvaBVWE2mQP6K31sRdcgaYUyB//P5540J4hFqMBcj6vkDEEGkwHkYdA==" crossorigin="anonymous"></script>
<script>
var zt = new ZingTouch.Region(document.body);
var myElement = document.getElementById("swipe_here");
zt.bind(myElement, "pan", function(e) {
let angle = e.detail.data[0].directionFromOrigin;
if ((angle >= 315 && angle <= 360) || (angle <= 45 && angle >= 0)) {
(e.detail.events).forEach(_e => _e.originalEvent.preventDefault());
window.location = "/'.$p.'";
return;
}
else if (angle >= 135 && angle <= 225) {
(e.detail.events).forEach(_e => _e.originalEvent.preventDefault());
window.location = "/'.$n.'";
return;
}
});
</script>';

在我的Windows 10机器和安卓手机上都能正常工作。

鸣谢

如图所示，这个ZingTouch库非常棒。

文档对于一般的洞察力来说是很好的，但对于实际问题的解决方案来说是稀疏的，所以我自己无法找到如何实现我想要的。

我不想忍受阅读源代码的痛苦，而是想打开一个问题。所以我研究了他们已经存在的问题。

从他们的问题中，我了解到ZingTouch已经被放弃，但最近又复活了。因此，也要向whoacoboy致敬。

对于像我这样很少处理这些话题的人来说，也许更多的工作例子会很好。

附录

显示我发现过程痕迹的工作版本可能对一些人来说也很有趣：

echo '
<script src="https://cdnjs.cloudflare.com/ajax/libs/zingtouch/1.0.6/zingtouch.min.js" integrity="sha512-HmaXasRYOQJEXJWYwYCMcIA/XnPtW9WPvaBVWE2mQP6K31sRdcgaYUyB//P5540J4hFqMBcj6vkDEEGkwHkYdA==" crossorigin="anonymous"></script>
<script>
//console.log("swipe_single");
var zt = new ZingTouch.Region(document.body);
//console.log("swipe_single2");
var myElement = document.getElementById("swipe_here");
//console.log("swipe_single3");
/*
zt.bind(myElement, "swipe", function(e){
console.log(e.detail);
//        window.location = "/'.$p.'";
//Actions here
}, false);
//console.log("swipe_single4");
*/
zt.bind(myElement, "pan", function(e) {
//  console.log("panning");
let angle = e.detail.data[0].directionFromOrigin;
if ((angle >= 315 && angle <= 360) || (angle <= 45 && angle >= 0)) {
direction = "right";
(e.detail.events).forEach(_e => _e.originalEvent.preventDefault());
window.location = "/'.$p.'";
//console.log(direction);        
return;
}
else if (angle >= 135 && angle <= 225) {
direction = "left";
(e.detail.events).forEach(_e => _e.originalEvent.preventDefault());
window.location = "/'.$n.'";
//console.log(direction);        
return;
}
else if (angle <= 135) {
direction = "up";
//console.log(direction);        
} else {
direction = "down";
//console.log(direction);        
}
});
console.log("swipe_single5");
</script>
';