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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
vue-dialog的弹出层组件
May 25 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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
网络资源
2006/10/09 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
聊聊Python中的pypy
2018/01/12 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
django如何自己创建一个中间件
2019/07/24 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
中国入世承诺
2014/04/01 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
廉政承诺书范文
2015/04/28 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS