位置: 编程技术 - 正文

js仿QQ中对联系人向左滑动、滑出删除按钮的操作

编辑:rootadmin

推荐整理分享js仿QQ中对联系人向左滑动、滑出删除按钮的操作,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例为大家分享实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮。滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处。

纯js实现使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果:

做成zepto插件实际项目中,我们可能有很多个地方会用到这个功能。现在我们将这个功能做成zepto插件,方便后面使用。

这个插件,我们仅实现这个功能,然后传入参数(删除按钮的样式名),让程序在js中计算所需要滑动的距离,方便复用。

zepto.touchWipe.js

touchWipe.html

js仿QQ中对联系人向左滑动、滑出删除按钮的操作

效果:

实际项目中的应用效果:

消除BUG到上面一步,基本实现了我们所需要的功能。但是有几个问题:

1. 右边的删除按钮点击失灵,因为span无法冒泡到大按钮上;

2. 非常严重的问题,我们给div添加了touchmove事件同时用preventDefault()屏蔽了原始的浏览器事件,导致上下滑动div的时候 页面无法滚动了!

第一个问题比较容易解决,我们把span直接去掉,将“删除”写到css中的:before里,像这样:

对于第二个问题,网上说用iscroll来解决。我们这里参考手机QQ中对联系人的滑动操作。

大致原理:在滑动最开始的时候,判断是Y轴的移动多 还是 X轴的移动多。 如果是X轴移动大,则判断为滑动删除操作,我们再使用preventDefault();

标签: js仿QQ中对联系人向左滑动、滑出删除按钮的操作

本文链接地址:https://www.jiuchutong.com/biancheng/373408.html 转载请保留说明!

上一篇:基于javascript bootstrap实现生日日期联动选择(基于JAVAscrip的课程设计源代码)

下一篇:javascript模块化简单解析(javascript模块化规范有哪些)

  • 怎么修改金税盘登录密码
  • 企业清算分配要交所得税吗
  • 先付款后签合同 法律效力
  • 摄影服务属于哪个开票类目
  • 自然人个税申报换电脑数据怎么合并
  • 19年高速公路免费时间
  • 房屋出租需要缴纳个人所得税吗
  • 年末有留抵税额怎么做税费对冲
  • 代付电费开具发票账务处理
  • 所得税预缴申报表
  • 个税申报系统中年收入不超6万元的确认错了怎么改
  • 增值税的税负率的计算公式
  • 降低房租
  • 长期股权投资的初始计量
  • 进口商品合同
  • 购入的商品用于捐赠怎么做分录
  • 房租发票税金谁承担
  • 员工福利没有发票
  • 过桥过闸 增值税
  • 增值税普通发票几个点
  • 会计核算的主要依据是什么
  • 个税三险一金指什么意思
  • 建筑公司收到工程款需要交哪些税
  • 购买预付卡如何记账
  • 股权转让协议解除返还股权优先权
  • ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法 原创
  • 应付账款周转天数越大说明什么
  • npm info: node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
  • 摇篮山圣克莱尔湖国家公园
  • 研发费用加计扣除75%还是100%
  • 用友结算成本处理的作用
  • 配置eAccelerator和XCache扩展来加速PHP程序的执行
  • linux查看ssh服务开启
  • 公司注销后所欠债怎么办
  • 加油费属于什么费用类别的
  • web-inf lib
  • php常用工具
  • 公司财务认证负责人实名认证需要承担责任吗
  • c#创建web
  • 2手房价格
  • 一般纳税人和小微企业的区别
  • 结转成本涉及的科目
  • mysql5.7.35安装配置教程
  • 健身房注册公司能注册医疗吗?
  • 政府会计财务报表有哪些
  • 印花税征税范围及税率
  • 预算收入分为哪几种方式
  • 什么情况下会被判死刑
  • 培训学校收入如何确认
  • 什么是企业所得税收入
  • 利润表和资产负债表不平的原因
  • 收到增值税发票月饼
  • 加计抵减与加计抵消区别
  • 发票作废该如何操作
  • 融资租赁固定资产折旧年限
  • 预付一年房租费的会计分录
  • 销售佣金的三大特点是什么?
  • 12月收入1月份开发票怎么报企业所得税
  • 营改增后工程结算的账务处理
  • 教育费附加免征文件
  • mysql innodb缓存
  • Linux(Ubuntu)下mysql5.7.17安装配置方法图文教程
  • adb.exe是什么程序
  • Win10系统如何开启全部权限
  • 将程序桌面图标放到桌面
  • 电脑重装win7系统黑屏
  • win7开机出现标志后就重启
  • win7系统如何创建新用户
  • Cocos2d-x 3.2 Lua示例 ActionTest(动作测试)
  • Unity AssetBundle爬坑手记
  • apache使用端口
  • 提高网页的效率的方法有
  • unity游戏项目开发教程
  • 使用灭火器人要站在上风口还是下风口
  • jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
  • 安卓中的多线程
  • 收到银行手续费发票怎么做分录
  • 营改增之前建筑业税率是多少
  • 国际税收管理处忙不忙
  • 环保职责及管理范围
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设