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读取中文COOKIE的解决办法
Feb 15 Javascript
Prototype Number对象 学习
Jul 19 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
js中unicode转码方法详解
Oct 09 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 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小教程之实现双向链表
2014/06/12 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
学生信息管理系统python版
2018/10/17 Python
Django重设Admin密码过程解析
2020/02/10 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python 使用office365邮箱的示例
2020/10/29 Python
Django实现简单的分页功能
2021/02/22 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
迟到检讨书500字
2014/02/05 职场文书
观后感格式
2015/06/19 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python