JS implements the function of sliding left on the mobile terminal to display the delete button-JS Tutorial-php.cn

JS implements the function of sliding left on the mobile terminal to display the delete button

不言

Release： 2018-06-25 14:28:46

Original

1830 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. In fact, it is very simple to implement this function. This article mainly introduces how to realize the delete button when sliding to the left on the mobile terminal based on js. Friends who need it can refer to

Recently when working on a mobile terminal project, it is necessary to realize that each item of a list page moves to the left. The corresponding delete button appears when sliding. I originally thought of using zepto's touch.js plug-in directly, because I had used this plug-in before to achieve the same function. It was quite easy to use at the time. Just use its swipeLeft and swipeRight methods. But 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 plugin 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 the implementation of native js for mobile adaptation has been added to the beginning of the page, 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:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

How to use js to implement the horizontal drag and drop navigation bar function

Restrict the upload of uploadify in js Number

The above is the detailed content of JS implements the function of sliding left on the mobile terminal to display the delete button. For more information, please follow other related articles on the PHP Chinese website!