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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
js 金额文本框实现代码
Feb 14 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JavaScript实现轮播图特效
Apr 10 Javascript
微信小程序实现聊天室功能
Jun 14 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
Python argv用法详解
2016/01/08 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏