基于原生JS实现移动端列表左滑删除功能与自适应布局

移动端列表左滑删除功能实现背景

在近期的移动端项目开发中，需求涉及列表页面中每个项目向左滑动时展示对应的删除按钮。起初考虑直接调用zepto框架下的touch.js插件，鉴于过往使用该插件的swipeLeft和swipeRight方法能顺利实现类似功能。然而此次尝试中，即便下载了最新版本的zepto和touch.js，相关方法仍无任何响应，导致该方案不可行，最终决定放弃插件依赖。

基于原生JS的触摸事件处理

后续采用的解决方案基于原生JavaScript的touch事件，通过获取并对比触摸点的坐标值来精准判断用户执行的是左滑还是右滑操作，具体实现代码如下。

<!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>
<div 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>
</div>
<script>
//侧滑显示删除按钮
var expansion = null; //是否存在展开的list
var container = document.querySelectorAll('.list li a');
for(var i = 0; i < container.length; i++){ 
 var x, y, X, Y, swipeX, swipeY;
 container[i].addEventListener('touchstart', function(event) {
  x = event.changedTouches[0].pageX;
  y = event.changedTouches[0].pageY;
  swipeX = true;
  swipeY = true ;
  if(expansion){ //判断是否展开，如果展开则收起
   expansion.className = "";
  }  
 });
 container[i].addEventListener('touchmove', 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>

移动端rem自适应布局方案

此外，在页面初始化阶段引入了针对移动端的自适应逻辑，旨在优化不同尺寸屏幕上的页面展示效果。通过控制误差范围，尽可能还原设计稿的视觉效果，核心实现依赖于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>

rem原理与响应式方案对比

其核心原理在于根据当前设备的屏幕宽度动态计算根节点html的font-size，随后利用rem相对于根节点html的font-size进行相对单位换算，从而确定页面中各元素的大小及间距，以适应不同设备。

尽管有观点认为可直接使用css3的响应式@media screen来替代js判断，但在当前安卓屏幕尺寸繁杂多样的环境下，单纯依靠@media screen往往难以灵活应对各种适配需求，显得力不从心。

效果展示与源码获取

最终实现的效果如下图所示：

如需完整代码，可下载附件：

js_del_button(jb51.net).rar

以上分享了基于JS实现移动端向左滑动出现删除按钮的技术方案，希望能为开发者提供有益参考。如有任何疑问或建议，欢迎留言交流，小编将及时回复。感谢对本站的支持。