JavaScript
搜索
分类

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

作者：沪-小坏 时间：2024-04-17 09:51:07　

最近在做移动端项目时，需要实现一个列表页面的每一项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_del_button(aspxhome.com).rar

以上所述是小编给大家介绍的基于JS实现移动端向左滑动出现删除按钮功能网站的支持！

来源：http://www.cnblogs.com/tnnyang/p/6429730.html

标签：js,滑动,删除,按钮
0
投稿

猜你喜欢

  • sqlserver 使用SSMS运行sql脚本的六种方法

    2024-01-15 14:51:11

  • python selenium登录豆瓣网过程解析

    2021-12-15 09:52:49

  • 成为一个顶级设计师的第二准则

    2008-04-01 09:41:00

  • Python中import导入不同目录的模块方法详解

    2021-04-08 02:37:08

  • Python脚本实时处理log文件的方法

    2021-02-23 06:40:32

  • python文件的读取、写入与删除

    2022-01-21 21:17:12

  • mysql 8.0.13 安装配置方法图文教程

    2024-01-14 15:20:52

  • Mootools 1.2教程(5)——事件处理

    2008-11-19 16:33:00

  • mysql 索引合并的使用

    2024-01-14 05:53:39

  • 基于win2003虚拟机中apache服务器的访问

    2023-11-14 11:17:08

  • python Pygame的具体使用讲解

    2021-01-15 21:41:26

  • golang db事务的统一封装的实现

    2023-07-02 21:01:51

  • 一行Python3代码实现解析地址信息

    2023-11-02 14:27:30

  • javascript将中国数字格式转换成欧式数字格式的简单实例

    2024-05-09 10:20:21

  • iPhone应用设计趋势[译]

    2009-11-27 19:52:00

  • JavaScript中的函数声明和函数表达式区别浅析

    2023-08-05 23:22:36

  • python写一个md5解密器示例

    2023-05-24 14:45:10

  • mysql5.5.28安装教程 超详细!

    2024-01-15 16:02:05

  • JetBrains(IEDA、CLion、Pycharm) 学生获得免费使用资格

    2022-02-21 09:25:35

  • Oracle数据库处理多媒体信息

    2010-07-16 13:01:00
    • asp之家 网络编程 m.aspxhome.com