为导航添加touchEvents

Question

我正在建立一个全页水平和垂直滚动的小网站。查看一个codepen演示here.演示中有一个错误，＆＃39; left＆＃39;并且＆＃39; up＆＃39;按钮不会按照他们应该的方式工作。正确的＆＃39;并且＆＃39; down＆＃39;按钮工作正常。我只是把它扔到一起向你展示我正在谈论的内容（原谅我的内联样式）。

首先，我需要合并touchEvents以使整页滚动在移动设备上运行。如果用户向左，向右，向下或向上滑动，页面应相应移动。我还在学习JS的基础知识，我不知道从哪里开始。

其次，我对是否在我的JS中使用最佳实践有一些疑问。首先，我重复了很多。另一方面，我非常确定这是我尝试做的更简单的方法。如果你能看一下我的代码并给我一些建议，我会很感激。谢谢！

Answer 1

你需要在CSS中修改这两个：

int *

• 第一个：点击向上按钮后，它会从顶部位置向下移动 100vh。
• 第二个：点击左键时，从左侧位置移动100vw。

就移动电话而言，我建议尝试使用：

• Hammer.js： https://hammerjs.github.io/
• 或参考此回答： https://stackoverflow.com/a/23230280/2474466

你可以通过编写一个函数并调用它来减少代码行：（确保全局声明panel2变量）

#center.cslide-up {
  top: 100vh;
}

#center.cslide-left {
  left: 100vw;
}

• 函数 swiper 采用单个参数btnL.addEventListener('click', function() { swiper("left"); }); btnLBack.addEventListener('click', function() { swiper("left"); }); function swiper(dir){ panelC.classList.toggle('cslide-'+dir); if(dir=="up") panel2=panelU; else if(dir=="right") panel2=panelR; else if(dir=="left") panel2=panelL; else if(dir=="down") panel2=panelD; panel2.classList.toggle('slide-'+dir); } ，该参数确定必须移动的方向。您可以将dir与 cslide - 连接起来以移动中心容器。并使用if / else条件来确定要移动哪个面板并使用相同的想法。
• 为了让它更简单，更有效率，如果您不使用任何其他事件监视器来处理按钮或面板，并且唯一的目的是切换类，您可以使用内联{{面板和按钮上的1}}属性仅在需要时触发它，而不是在脚本中定义eventlisteners。

＆＃13;

＆＃13;

dir

＆＃13;

onClick="swiper('direction');"

＆＃13;

var panel2;
var panelC = document.getElementById('center');
var panelU = document.getElementById('up');
var panelR = document.getElementById('right');
var panelD = document.getElementById('down');
var panelL = document.getElementById('left');
var btnU = document.getElementById('btn-up');
var btnR = document.getElementById('btn-right');
var btnD = document.getElementById('btn-down');
var btnL = document.getElementById('btn-left');
var btnUBack = document.getElementById('btn-up-back');
var btnRBack = document.getElementById('btn-right-back');
var btnDBack = document.getElementById('btn-down-back');
var btnLBack = document.getElementById('btn-left-back');

btnU.addEventListener('click', function() {
  swiper("up");
});
btnUBack.addEventListener('click', function() {
  swiper("up");
});

btnR.addEventListener('click', function() {
  swiper("right");
});
btnRBack.addEventListener('click', function() {
 swiper("right");
});

btnD.addEventListener('click', function() {
  swiper("down");
});
btnDBack.addEventListener('click', function() {
  swiper("down");
});

btnL.addEventListener('click', function() {
  swiper("left");
});
btnLBack.addEventListener('click', function() {
  swiper("left");
});


function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}

＆＃13;

＆＃13;

＆＃13;