>  기사  >  웹 프론트엔드  >  JS 기반으로 모바일 단말기에서 왼쪽으로 슬라이드 시 삭제 버튼 기능 구현

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

高洛峰
高洛峰원래의
2017-02-23 17:17:122004검색

최근 모바일 프로젝트를 작업할 때 목록 페이지의 각 항목을 왼쪽으로 밀면 나타나는 해당 삭제 버튼을 구현해야 했습니다. 원래는 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 기반으로 모바일 단말기에서 왼쪽으로 슬라이드 시 삭제 버튼 기능 구현

위는 모바일 단말기에서 왼쪽으로 슬라이딩하여 표시하는 기능을 JS 기반으로 구현한 것입니다. 삭제 버튼을 눌러주세요. 질문이 있으신 경우 메시지를 남겨주시면 편집자가 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

모바일 단말기에서 왼쪽 슬라이드 시 삭제 버튼 기능을 구현하는 JS 기반 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.