JS如何实现封装列表右滑动删除收藏按钮


Posted in Javascript onJuly 23, 2020

前言

列表右滑动展示删除和收藏按钮就类似微信或者美团饿了吗的列表,右滑动出现指定的按钮功能;

本来我是想把前几年支付宝的一个机试题拿来讲,奈何我记不太清题目,也找不到当时做的题了,所以只好将就一下那这个案例来讲解,其实解题思路大致是一样的,毕竟作为程序员最重要的不是会多少框架和会用api用的多熟练,设计思路才是最重要!

案例

JS如何实现封装列表右滑动删除收藏按钮

这个界面相信大家都非常熟悉,很多时候一些封装好的插件可以拿来用即可实现这个功能,算是比较大众化,不过为了给不了解原理的小伙伴们讲解,所以自己用dom手写了一个,思路如下:

html部分

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>支付宝前端机试题</title>
 <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
 <script src="js/index.js"></script>
</head>

<body>
 <h2 class="title">购物车</h2>
 <section class="shoppingList"></section>
</body>

</html>

JS部分

let initXY = [0,0];//记录移动的坐标
let isStop = false;//记录是否禁止滑动
let oldIndex = null;//记录旧的下标
let theIndex = null;//记录新的下标

function touchstart(event,index){
 if(event.touches.length > 1) {
  isStop = true;
  return;
 }
 oldIndex = theIndex;
 theIndex = null;
 initXY = [event.touches[0].pageX,event.touches[0].pageY];
 // console.log(initXY);
}

function touchmove(event,index){
 if(event.touches.length > 1) return;
 let moveX = event.touches[0].pageX - initXY[0];
 let moveY = event.touches[0].pageY - initXY[1];
 if(isStop || Math.abs(moveX) < 5) return;//如果禁止滑动或者滑动的距离小于5就返回
 if(Math.abs(moveY) > Math.abs(moveX)){
  isStop = true;
  return;
 }
 if(moveX<0){
  theIndex = index;
  isStop = true;
 }else if(theIndex && oldIndex === theIndex){
  oldIndex =index;
  theIndex = null;
  isStop = true;
  setTimeout(()=>{oldIndex=null;},150);//设置150毫秒延迟来凸显动画效果,实际不加也可以
 }
 // 这里用jq就不用循环了,但我懒得引,大家知道就好
 let goods = document.getElementsByClassName("goodsInfo");
 for(let i=0;i<goods.length;i++){
  theIndex === i ? goods[i].classList.add("open") : goods[i].classList.remove("open");
 };
 // console.log(moveX,moveY);
}

function touchend(){
 isStop = false;
}

总结

实现的方法无非就是判断触碰的时候移动的坐标值再加上动画,有兴趣看源代码的小伙伴可以到github下载:

https://github.com/13632756286/Sliding-menu

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 作用域使用说明
Aug 13 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
js数组依据下标删除元素
Apr 14 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
Vue实现简易计算器
Feb 25 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 #Javascript
JS前后端实现身份证号验证代码解析
Jul 23 #Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 #Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 #Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 #Javascript
javascript递归函数定义和用法示例分析
Jul 22 #Javascript
简单了解vue 插值表达式Mustache
Jul 22 #Javascript
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
javascript数组的使用
2013/03/28 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python实现操作文件(文件夹)
2019/10/31 Python
python Gabor滤波器讲解
2020/10/26 Python
迪奥官网:Dior.com
2018/12/04 全球购物
旷课检讨书大全
2014/01/21 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
社区服务活动感想
2015/08/11 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android