JS 기반으로 모바일 단말기에서 왼쪽으로 슬라이드 시 삭제 버튼 기능 구현-JS 튜토리얼-php.cn

JS 기반으로 모바일 단말기에서 왼쪽으로 슬라이드 시 삭제 버튼 기능 구현

高洛峰

풀어 주다： 2017-02-23 17:17:12

원래의

2010명이 탐색했습니다.

최근 모바일 프로젝트를 작업할 때 목록 페이지의 각 항목을 왼쪽으로 밀면 나타나는 해당 삭제 버튼을 구현해야 했습니다. 원래는 zepto의 touch.js 플러그인을 직접 사용하고 싶었습니다. 이전에 동일한 기능이 구현되었기 때문에 이 플러그인을 사용했는데 매우 사용하기 쉬웠습니다. swipeLeft 및 swipeRight 메소드를 사용하면 됩니다. 그러나 오늘 이 기능을 다시 사용하기 시작하면서 이러한 기능을 발견했습니다. 두 가지 방법을 사용해도 효과가 없었고 전혀 반응이 없었습니다. 온라인에서 정보를 확인하고 최신 버전의 zepto와 touch.js를 다운로드했는데 작동하지 않는 이유는 무엇인가요? 그래서 이 플러그인은 폐기되었습니다.

다음은 제가 나중에 구현한 코드입니다. 실제로 네이티브 js의 터치 이벤트를 사용한 다음 터치 지점의 좌표를 결합하여 왼쪽 및 오른쪽 스와이프를 결정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js侧滑显示删除按钮</title>
<style>
*{margin:0;padding:0;}
body{font-size:.14rem;}
li{list-style:none;}
i{font-style:normal;}
a{color:#393939;text-decoration:none;}
.list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}
.list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}
.list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
.list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
.swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
</style>
<script>
//计算根节点HTML的字体大小
function resizeRoot(){
 var deviceWidth = document.documentElement.clientWidth,
  num = 750,
  num1 = num / 100;
 if(deviceWidth > num){
  deviceWidth = num; 
 }
 document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
//根节点HTML的字体大小初始化
resizeRoot();

window.onresize = function(){
 resizeRoot();
};
</script>
</head>
<body>
<section>
<p class="list">
 <ul>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮1<i>删除</i></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮2<i>删除</i></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >侧滑显示删除按钮3<i>删除</i></a></li>
 </ul>
</p>
<script>
//侧滑显示删除按钮
var expansion = null; //是否存在展开的list
var container = document.querySelectorAll(&#39;.list li a&#39;);
for(var i = 0; i < container.length; i++){ 
 var x, y, X, Y, swipeX, swipeY;
 container[i].addEventListener(&#39;touchstart&#39;, function(event) {
  x = event.changedTouches[0].pageX;
  y = event.changedTouches[0].pageY;
  swipeX = true;
  swipeY = true ;
  if(expansion){ //判断是否展开，如果展开则收起
   expansion.className = "";
  }  
 });
 container[i].addEventListener(&#39;touchmove&#39;, function(event){
  
  X = event.changedTouches[0].pageX;
  Y = event.changedTouches[0].pageY;  
  // 左右滑动
  if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
   // 阻止事件冒泡
   event.stopPropagation();
   if(X - x > 10){ //右滑
    event.preventDefault();
    this.className = ""; //右滑收起
   }
   if(x - X > 10){ //左滑
    event.preventDefault();
    this.className = "swipeleft"; //左滑展开
    expansion = this;
   }
   swipeY = false;
  }
  // 上下滑动
  if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
   swipeX = false;
  }  
 });
}
</script>
</body>
</html>

로그인 후 복사

아마도 모바일 적응을 구현하기 위해 기본 js가 페이지 시작 부분에 추가되었다는 사실을 눈치채셨을 것입니다. 이는 주로 화면에 모바일 페이지를 더 잘 표시할 수 있도록 하기 위한 것입니다. 또한 매우 작은 오류로 다양한 크기의 화면에서 디자인 초안을 거의 완벽하게 표현하기 위해 사용되는 기본 단위는 rem입니다.

모바일 적응형 js

<script>
//计算根节点HTML的字体大小
function resizeRoot(){
 var deviceWidth = document.documentElement.clientWidth,
  num = 750,
  num1 = num / 100;
 if(deviceWidth > num){
  deviceWidth = num; 
 }
 document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
//根节点HTML的字体大小初始化
resizeRoot();

window.onresize = function(){
 resizeRoot();
};
</script>

로그인 후 복사

원리는 실제로 매우 간단합니다. 즉, 루트 노드 HTML을 다음과 같이 계산합니다. 다른 화면 font-size에 적용한 다음 루트 노드 html의 font-size을 기준으로 rem 계산 원리를 사용하여 다양한 요소의 크기, 간격 등을 실현합니다.

그런 js를 사용하여 판단할 필요가 없다고 말하는 사람들도 있습니다. 실제로 CSS3를 사용하는 것도 가능합니다. 너무 활동적이어서 @media screen대처하기가 좀 부담스러운 것 같아요. media screen

렌더링은 다음과 같습니다.

JS 기반으로 모바일 단말기에서 왼쪽으로 슬라이드 시 삭제 버튼 기능 구현