基于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 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
微信小程序上传图片实例
May 28 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 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
js 方法实现返回多个数据的代码
2009/04/30 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
JS中的变量作用域(console版)
2020/07/18 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python封装对象实现时间效果
2020/04/23 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python实现注册登录系统
2017/08/08 Python
对pandas处理json数据的方法详解
2019/02/08 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
中科方德软件测试面试题
2016/04/21 面试题
计算机个人求职信范例
2014/01/24 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
民事调解协议书
2016/03/21 职场文书