Based on JS, realize the delete button function when sliding left on the mobile terminal-JS Tutorial-php.cn

Based on JS, realize the delete button function when sliding left on the mobile terminal

高洛峰

Release： 2017-02-23 17:17:12

Original

2048 people have browsed it

When I was working on a mobile project recently, I needed to implement a corresponding delete button when each item on a list page is slid to the left. I originally wanted to use zepto's touch.js plug-in directly, because the same function was implemented before. I have used this plug-in, and it was quite easy to use at the time. You can just use its swipeLeft and swipeRight methods. However, when I started to use this function again today, I found that these two methods had no effect when used, and there was no response at all. I checked the information online and downloaded the latest versions of zepto and touch.js, but it didn't work. I don't know why? So this plug-in was abandoned.

The following is the code I later implemented. In fact, it uses the touch event of native js, and then combines the coordinates of the touch point to determine the left and right swipes,

<!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>

Copy after login

Perhaps you have also noticed that native js has been added to the beginning of the page to implement mobile adaptation, mainly to facilitate the better display of mobile pages on screens of different sizes. , also in order to better present the design draft on screens of different sizes with very small errors. The main unit used is rem.

Mobile terminal adaptive 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>

Copy after login

The principle is actually very simple, which is to calculate the root node html according to different screens font-size, and then use the principle of calculation of rem relative to the font-size of the root node html to realize the size, spacing, etc. of different elements.

Some people say that there is no need to use such js to judge. It is also possible to directly use the responsive @media screen of css3. In fact, I think it is so active on Android screens of various sizes. At the moment, @media screen seems a little unable to handle it.

The rendering is as follows:

Based on JS, realize the delete button function when sliding left on the mobile terminal

The above is the JS-based implementation introduced by the editor to realize the function of sliding left on the mobile terminal to display the delete button. , I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles based on JS to realize the delete button function when sliding left on the mobile terminal, please pay attention to the PHP Chinese website!