添加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>