基于JS实现移动端向左滑动出现删除按钮功能


Posted in Javascript onFebruary 22, 2017

最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有。上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件。

下面是我后来实现后的代码,其实就是用了原生js的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>

也许大家也注意到了,在页面最开始部分加入了原生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,再利用rem相对于根节点html的font-size来计算的原理来实现不同元素的大小、间距等。

也有人说其实不用这样的js来判断,直接用css3的响应式@media screen也可以,其实我认为在各种尺寸的安卓屏幕如此活跃的当下,@media screen处理起来就显得有些力不从心了。

效果图如下:

基于JS实现移动端向左滑动出现删除按钮功能

附下源码下载:

以上所述是小编给大家介绍的基于JS实现移动端向左滑动出现删除按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
You might like
让你的网站首页自动选择语言转跳
2006/12/06 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
Dojo 学习要点
2010/09/03 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Python实现线程池代码分享
2015/06/21 Python
Python用模块pytz来转换时区
2016/08/19 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Intersport西班牙:在线体育商店
2019/11/06 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
项目投资合作意向书
2014/07/29 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python