JS는 모바일 단말기에서 왼쪽으로 슬라이드하여 삭제 버튼을 표시하는 기능을 구현합니다.-JS 튜토리얼-php.cn

JS는 모바일 단말기에서 왼쪽으로 슬라이드하여 삭제 버튼을 표시하는 기능을 구현합니다.

不言

풀어 주다： 2018-06-25 14:28:46

원래의

1797명이 탐색했습니다.

최근 모바일 프로젝트를 작업할 때 목록 페이지의 각 항목을 왼쪽으로 밀면 나타나는 해당 삭제 버튼을 구현해야 했습니다. 실제로 이 기능을 구현하는 것은 매우 간단합니다. 이번 글에서는 주로 모바일 단말기를 왼쪽으로 슬라이드 했을 때 나타나는 삭제 버튼의 구현을 js 기반으로 소개합니다. 필요하신 분들은 참고하시면 됩니다

최근 모바일 단말기 프로젝트를 진행하면서 깨달아야 할 부분이 있습니다. 목록 페이지의 각 항목이 왼쪽으로 슬라이드되면 해당 디스플레이가 나타납니다. 삭제 버튼의 경우 원래는 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의 글꼴 크기를 계산한 다음 사용합니다. 루트 노드를 비교하기 위한 rem html font-size는 다양한 요소의 크기, 간격 등을 계산하는 데 사용됩니다. font-size，再利用rem相对于根节点html的font-size来计算的原理来实现不同元素的大小、间距等。

也有人说其实不用这样的js来判断，直接用css3的响应式@media screen也可以，其实我认为在各种尺寸的安卓屏幕如此活跃的当下，@media screen

그런 js를 사용하여 판단할 필요가 없다고 말하는 사람들도 있습니다. 실제로 CSS3의 반응형 @미디어 화면을 직접 사용할 수도 있습니다. 실제로 이제는 다양한 크기의 Android 화면이 있다고 생각합니다. 너무 활동적이어서 @미디어 화면이 처리하기에는 약간 힘이 없는 것 같습니다.

번역은 다음과 같습니다.