移動端滑動事件詳解

一、移動端滑動事件穿透

在移動端上，如果有一個滑動組件，例如輪播圖組件，當滑動該組件時，很可能會觸發下方的其他組件的點擊事件。這種情況稱為滑動事件穿透。

為了解決這個問題，我們可以使用CSS屬性pointer-events來禁止下方組件的點擊事件，代碼如下：

overflow: hidden;
pointer-events: none; 

二、移動端的滑動事件

在移動端上，有以下幾種滑動事件：

• touchstart：手指觸摸事件。
• touchmove：手指滑動事件。
• touchend：手指離開事件。

我們可以使用這幾個事件來實現一些有趣的效果。例如，在touchstart事件中記錄手指的位置，在touchmove事件中計算手指的移動距離，並根據移動距離移動UI組件。代碼如下：

var startX, startY;
element.addEventListener('touchstart', function(e) {
  startX = e.touches[0].pageX;
  startY = e.touches[0].pageY;
}, false);
element.addEventListener('touchmove', function(e) {
  var distanceX = e.touches[0].pageX - startX;
  var distanceY = e.touches[0].pageY - startY;
  // 在這裡根據distanceX和distanceY移動UI組件
}, false);

三、js移動端滑動事件

除了原生的touch事件，我們也可以使用一些封裝過的javascript插件，例如iScroll、Swiper等來實現一些常見的滑動效果。這些插件通常具有更加靈活的配置項和更好的瀏覽器兼容性。

以Swiper為例，我們可以使用以下代碼來初始化一個輪播圖：

var mySwiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  loop: true,
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 10,
});

四、移動端滑動觸發了點擊事件

在移動端上，如果手指在滑動過程中觸及了某個UI組件，並且手指離開時沒有達到滑動的最小距離，那麼就會觸發這個UI組件的點擊事件。

我們可以通過以下代碼來禁止這種行為：

var preventDefault = function(e){ 
  e.preventDefault(); 
}; 
// 禁止touchmove事件的默認行為 
document.addEventListener('touchmove', preventDefault, {passive: false}); 
// 解除禁止 
document.removeEventListener('touchmove', preventDefault, {passive: false}); 

五、移動端左右滑動

在移動端上，左右滑動常見於輪播圖、橫向列表等，我們可以使用touch事件來實現這種效果。

例如，在touch事件中，我們可以記錄手指落下和抬起時的位置，並根據它們來計算出滑動的距離和方向，然後移動UI組件即可。對於橫向列表，我們可以根據手指滑動的距離來計算出列表應該移動的距離。代碼如下：

var startX, startY;
element.addEventListener('touchstart', function(e) {
  startX = e.touches[0].pageX;
  startY = e.touches[0].pageY;
}, false);
element.addEventListener('touchmove', function(e) {
  var distanceX = e.touches[0].pageX - startX;
  var distanceY = e.touches[0].pageY - startY;
  if(Math.abs(distanceY) < Math.abs(distanceX)) {
    // 左右滑動
    e.preventDefault(); // 防止觸發了穿透事件
    // 在這裡根據distanceX移動UI組件
  }
}, false);

六、移動端上下滑動事件

在移動端上，上下滑動通常用於滾動條、下拉刷新等場景。我們可以使用原生的touch事件和CSS屬性來實現這些效果。

例如，在touch事件中，我們可以記錄手指落下和抬起時的位置，並根據它們來計算出滑動的距離和方向，然後移動UI組件即可。對於滾動條，我們可以使用CSS的overflow-x和overflow-y來禁止或開啟橫向和縱向的滾動條。代碼如下：

var startX, startY;
element.addEventListener('touchstart', function(e) {
  startX = e.touches[0].pageX;
  startY = e.touches[0].pageY;
}, false);
element.addEventListener('touchmove', function(e) {
  var distanceX = e.touches[0].pageX - startX;
  var distanceY = e.touches[0].pageY - startY;
  if(Math.abs(distanceY) > Math.abs(distanceX)) {
    // 上下滑動
    e.preventDefault(); // 防止觸發了穿透事件
    // 在這裡根據distanceY移動UI組件
  }
}, false);

七、移動端滾動條事件

在移動端上，滾動條的滑動和PC端有所不同。我們可以使用原生的touch事件來模擬滾動條的滑動，並根據滑動的距離來計算出列表應該移動的距離。代碼如下：

var startX, startY, offsetY;
var scrollContainer = document.querySelector('.scroll-container');
var content = document.querySelector('.content');
scrollContainer.addEventListener('touchstart', function(e) {
  startY = e.touches[0].pageY;
  offsetY = content.offsetTop;
}, false);
scrollContainer.addEventListener('touchmove', function(e) {
  var distanceY = e.touches[0].pageY - startY;
  content.style.top = offsetY + distanceY + 'px';
}, false);

八、移動端左滑右滑事件

在移動端上，我們也可以實現左滑右滑的效果，常見的場景有類似微信的左滑刪除和滑動導航欄。我們可以使用touch事件來實現這些效果。

例如，在touch事件中，我們可以記錄手指落下和抬起時的位置，並根據它們來計算出滑動的距離和方向，然後移動UI組件即可。對於滑動導航欄，我們可以根據手指滑動的距離來計算出導航欄應該移動的距離。代碼如下：

var startX, startY, offsetX;
var navBar = document.querySelector('.nav-bar');
var navItems = navBar.children;
var currentIndex = 0;
navBar.addEventListener('touchstart', function(e) {
  startX = e.touches[0].pageX;
  offsetY = navItems[0].offsetLeft;
}, false);
navBar.addEventListener('touchmove', function(e) {
  var distanceX = e.touches[0].pageX - startX;
  if(distanceX > 0 && currentIndex > 0) {
    // 右滑
    e.preventDefault(); // 防止觸發了穿透事件
    // 在這裡根據distanceX移動UI組件
  } else if(distanceX < 0 && currentIndex < navItems.length - 1) {
    // 左滑
    e.preventDefault(); // 防止觸發了穿透事件
    // 在這裡根據distanceX移動UI組件
  }
}, false);

九、移動端左右滑動導航欄

在移動端上，左右滑動導航欄常見於類似微信的多個tab頁面之間的切換。我們可以使用touch事件來實現這種效果。

例如，在touch事件中，我們可以記錄手指落下和抬起時的位置，並根據它們來計算出滑動的距離和方向，然後移動UI組件即可。對於導航欄，我們可以根據手指滑動的距離來計算出導航欄應該移動的距離。代碼如下：

var startX, startY, offsetX;
var header = document.querySelector('.header');
var tabs = header.children;
var currentIndex = 0;
header.addEventListener('touchstart', function(e) {
  startX = e.touches[0].pageX;
  offsetY = tabs[0].offsetLeft;
}, false);
header.addEventListener('touchmove', function(e) {
  var distanceX = e.touches[0].pageX - startX;
  if(distanceX > 0 && currentIndex > 0) {
    // 右滑
    e.preventDefault(); // 防止觸發了穿透事件
    // 在這裡根據distanceX移動UI組件
  } else if(distanceX < 0 && currentIndex < tabs.length - 1) {
    // 左滑
    e.preventDefault(); // 防止觸發了穿透事件
    // 在這裡根據distanceX移動UI組件
  }
}, false);

十、移動端滑動穿透怎麼解決

移動端滑動事件穿透會導致在滑動一個組件時觸發其他組件的點擊事件，我們可以使用CSS屬性pointer-events來禁止下方組件的點擊事件。代碼如下：

overflow: hidden;
pointer-events: none; 

我們也可以使用javascript來阻止穿透事件的觸發。例如，在touchmove事件中，我們可以調用e.preventDefault()來阻止穿透事件的觸發：

element.addEventListener('touchmove', function(e) {
  e.preventDefault(); // 防止觸發了穿透事件
}, false);

或者，在需要禁止穿透事件的元素上添加以下CSS樣式：

pointer-events: none;
touch-action: none;