javascript - 为导航添加 touchEvents

Question

我正在构建一个具有整页水平和垂直滚动功能的小网站。查看 codepen 演示 here.演示有一个错误，“向左”和“向上”按钮无法正常工作。 “向右”和“向下”按钮工作正常。我只是把它们放在一起向您展示我在说什么(请原谅我的内联样式)。

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

其次，我对我是否在我的 JS 中使用最佳实践有一些疑问。一方面，我重复了很多次。另一方面，我很确定有一种更简单的方法可以解决我想要做的事情。如果您能看看我的代码并给我一些建议，我将不胜感激。谢谢!

Answer 1

需要在CSS中修改这两个:

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

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

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

至于手机，我建议尝试使用:

• Hammer.js : https://hammerjs.github.io/
• 或者引用这个答案: https://stackoverflow.com/a/23230280/2474466

你可以通过编写一个函数并像这样调用它来减少代码行:(确保全局声明 panel2 变量)

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);
}

• 函数 swiper 有一个参数 dir ，它决定了它必须向哪个方向移动。您可以将 dir 与 cslide- 连接起来以移动中心容器。并使用 if/else 条件来确定要移动哪个面板，并对其使用相同的想法。
• 为了使它更简单和更高效，如果您没有为按钮或面板使用任何其他事件监听器并且唯一的目的是切换类，您可以只使用内联 onClick ="swiper('direction');" 面板和按钮上的属性以仅在需要时触发它，而不是在脚本中定义事件监听器。

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);
}

* {
  margin: 0;
  padding: 0;
  transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
  overflow: hidden;
  background: white;
}

.panel {
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  border: 1px solid blue;
}

.btn {
  position: absolute;
  padding: 16px;
  cursor: pointer;
}

#center {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

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

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

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

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



#up {
  top: -100vh;
}

#up.slide-up {
  top: 0;
}

#right {
  right: -100vw;
}

#right.slide-right {
  right: 0;
}

#down {
  bottom: -100vh;
}

#down.slide-down {
  bottom: 0;
}

#left {
  left: -100vw
}

#left.slide-left {
  left: 0;
}

<div class="panel" id="center">
  <div class="btn" id="btn-up" style="text-align: center; width: 100%;">
    up
  </div>
  <div class="btn" id="btn-right" style="right: 0; top: 50%;">
    right
  </div>
  <div class="btn" id="btn-down" style="text-align: center; bottom: 0; width: 100%;">
    down
  </div>
  <div class="btn" id="btn-left" style="top: 50%;">
    left
  </div>
</div>

<div class="panel" id="up">
  <div class="btn" id="btn-up-back" style="bottom: 0; width: 100%; text-align: center;">
    back
  </div>
</div>

<div class="panel" id="right">
  <div class="btn" id="btn-right-back" style="left: 0; top: 50%;">
    back
  </div>
</div>

<div class="panel" id="down">
  <div class="btn" id="btn-down-back" style="top: 0; width: 100%; text-align: center;">
    back
  </div>
</div>

<div class="panel" id="left">
  <div class="btn" id="btn-left-back" style="right: 0; top: 50%;">
    back
  </div>
</div>