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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
actionscript与javascript的区别
May 25 Javascript
js精度溢出解决方案
Dec 02 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
对javascript继承的理解
Oct 11 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 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实现的一个简单json rpc框架实例
2015/03/30 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
详解Vue中添加过渡效果
2017/03/20 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
基于Python的OCR实现示例
2020/04/03 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
浙大网新C/C++面试解惑
2015/05/27 面试题
中科软测试工程师面试题
2012/06/16 面试题
房屋出租协议书
2014/04/10 职场文书
高中生评语大全
2014/04/25 职场文书
科技之星事迹材料
2014/06/02 职场文书
司法所长先进事迹
2014/06/02 职场文书
少先队活动总结
2014/08/29 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
关于EntityWrapper的in用法
2022/03/22 Java/Android
基于Python实现将列表数据生成折线图
2022/03/23 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫