添加touchEvents进行导航

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

您需要在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>

以上是 添加touchEvents进行导航 的全部内容， 来源链接： utcz.com/qa/267265.html

回到顶部