添加touchEvents进行导航

Question

我正在构建一个包含完整页面水平和垂直滚动的小站点。查看一个codepen demo here.演示中存在一个错误，'left'和'up'按钮不能正常工作。 '右'和'下'按钮工作正常。我只是一起扔给你看我在说什么（原谅我的内联样式）。

首先，我需要合并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

你可以通过烹饪一个函数来减少代码行数，并像这样调用它：（Make su重新声明全局变量是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); 
} 

• 功能刷卡只有一个参数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>