位置: 编程技术 - 正文

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模块化规范有哪些)

  • 金税盘解锁后是否可以直接使用
  • 临时用工的会计分录
  • 一般纳税人可以开免税发票吗
  • 个税手续费发给个人怎么做账
  • 个人打钱对公账户,可以算公司营业收入吗
  • 对方发票丢失怎么办理
  • 住房公积金个人和单位各承担多少
  • 一个公司控股另一个公司
  • 本期已认证但不想抵扣申报表怎么填写
  • 国有企业无偿划转资产需要交税吗?
  • 代开专票作废了扣了两次税怎么办?
  • 支付员工一次性补偿呈批件
  • 房产过户的相关问题
  • 增值税专用发票几个点
  • 公司单独买医保
  • 税率是3%开成5%怎么办
  • 普票冲红需要收回全部联次吗
  • 年收入12万以内个人所得税
  • 往来账的作用
  • 小额贷款公司借钱容易吗
  • 认证过的发票
  • 金税盘发票报送状态未报送
  • 小规模纳税人增值税免征额
  • 购买税控设备,享受何种优惠政策
  • 独生子女补贴怎么查询
  • 0x0000709怎么解决
  • 一般纳税人转为小规模纳税人后还可以转为一般纳税人吗
  • 公务接待和商务接待自查
  • 对公转账先打钱后转账
  • win11闪屏问题
  • thinkphp5开发教程
  • PHP:xml_parser_create()的用法_XML解析器函数
  • kb4580419更新
  • 如何查看自己的qq密码
  • shstart.exe - shstart是什么进程 有什么用
  • service.exe是什么进程
  • alibabapritect
  • 购进的货物
  • 免征的增值税如何处理
  • 企业延期收款
  • 付工程改造余款分录
  • 供电局销售电力产品
  • 微信支付开发包
  • mysql识别中文
  • 工会经费计算公式的例子
  • wordpress全站伪静态
  • druid数据库连接池
  • mongodb查询字段不存在
  • PostgreSQL 创建表分区
  • 同级财政和本级财政
  • 营利性养老机构有补贴吗
  • 权益法下股权投资包括
  • 银行存款账面余额是企业还是银行
  • 发票作废怎么写说明
  • 工程施工间接费用明细
  • 第一份工作的五个条件
  • 保险公司会计的特点
  • 税收分类编码怎么选
  • 股东退股如何清算表格
  • 数据库木马
  • sql server多表查询
  • win7系统无法启动怎么解决
  • ubuntu14升级
  • Ubuntu如何安装vim编辑器
  • win7系统笔记本怎么调节电脑亮度
  • cocos2dx视频教程
  • cocos2dx 教程
  • linux中xargs的含义
  • 备份mbr引导
  • cocos2dx3.3 便条提示语功能简单实现
  • 机械革命系统重装官方教程
  • 用批处理结束进程
  • 3、BluetoothChat之BluetoothChatService.java
  • 组件中js可以做什么
  • 深入python3
  • 浙江税务客服咨询电话
  • 宝鸡税务局长
  • 税控盘离线开票时间怎么查
  • 柴油增值税发票
  • 大班直播课怎么上
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设