移动端滑动事件详解

一、移动端滑动事件穿透

在移动端上，如果有一个滑动组件，例如轮播图组件，当滑动该组件时，很可能会触发下方的其他组件的点击事件。这种情况称为滑动事件穿透。

为了解决这个问题，我们可以使用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;