位置: 编程技术 - 正文

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

  • 一人在两家公司上班怎么缴纳个税
  • 什么时候要计提坏账准备
  • 城建税计税依据公式
  • 计税基础怎么算
  • 单身租房可以专租房吗
  • 企业将资产移送他人的下列情形
  • 资产折旧纳税
  • 商业汇票概念股票
  • 福利费需要交纳个税吗
  • 总公司在异地和分公司交社保
  • 开店卖蔬菜
  • 房地产开发企业资质管理规定
  • 专票税率开错了有什么影响
  • 发票一直报送中,开不了发票
  • 认缴制的期限是多久
  • 营业成本收入比
  • 不抵扣勾选怎么挽回
  • 公司替员工承担个税分录不再收回
  • 子公司和母公司可以一起投标吗
  • 其他应付款的会计英文
  • 核定征收的合伙企业 取得的投资收益
  • 中央空调使用费怎么开发票
  • 公司员工驻外补贴政策
  • 特种车辆租赁需要什么资质
  • 折旧计算方法举例
  • 把u盘变成光盘模式
  • 企业庆祝建党活动
  • 个体户流水太大工商局会查吗
  • 制造费用主要包括哪些费用
  • 酒店代销合同范本
  • 农民工的职业培训
  • 如何开启framework 3.5
  • 施工企业会计核算特点有哪些
  • 电子承兑汇票支付信用查询是什么意思
  • thinkphp saveall
  • 基于web的网站设计与实现
  • 非事业单位企业退休年龄
  • 未分配利润为负的原因
  • 其他权益工具投资是金融资产吗
  • 股权出质有时间限制吗
  • 出纳报销时应注意什么
  • 汇算清缴涉及哪些调整
  • 临过期产品
  • 其他综合收益影响所得税费用吗
  • 税控盘怎么看是否清盘
  • sqlserver2008安装闪退
  • 差旅费津贴怎么报税
  • 应付劳务费怎么做账
  • 消费税直接计入销售额吗
  • 冲暂估费用
  • 企业取得土地补偿款
  • 投资性房地产转换日的确定
  • 红字冲销法可能会涉及的摘要有
  • 发票作废有什么后果
  • 专业收账公司合法吗
  • ubuntu桌面右键
  • win8.1无法连接wifi
  • linux cp 不是目录
  • yosemite10.10.3beta3下载地址 os x10.10.3beta3官网下载
  • win10mobile还能用吗
  • win7打印机删除后怎么恢复
  • win8休眠如何唤醒
  • 获取windows的最新信息
  • 为什么window10容易发热
  • win10微软更新
  • windows 8怎么样
  • win8程序和功能在哪
  • android break
  • [置顶] 《借.住.情.缘》
  • 浏览器如何批量打开网址
  • unity ui控件
  • docker编写dockerfile
  • 客户端脚本错误怎么解决
  • 纳税人谈感受
  • 浙江电子税局
  • 增值税已申报但是忘清卡
  • 国家税务总局河北地税局
  • 个人所得税税前扣除是什么意思
  • 境外个人税务备案登记表
  • 广东电子税务局官网登录入口手机版
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设