本篇文章给大家分享的是有关使用jQuery怎么实现一个左滑删除按钮,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<强>实现思路
为了说明我的实现思路,做了两个图来辅助说明。
首先,请看图1。在图中,我们设置每一行的宽度超过浏览器的宽度,其超出的部分就是放置按钮的区域。由于超出了浏览器的最大宽度,因此按钮区域此时是不可见的,只能显示左侧的常规信息部分。
图1普通状态
接下来,我们监听左侧常规信息区域,监听滑动事件(具体如何监听先不考虑)。当我们监听到左滑事件时,我们让相应行左偏移,让按钮显示出来,同时左侧超出的部分被遮挡(请看图2)。
图2左滑状态
当我们右滑时,我们再让相应行回复到左偏移为0的时候就行了。
<强>关键实现方式
对于左滑和右滑,我们通过设定常规信息区域的marin-left来实现,当设定margin-left为负值时,实现左滑,当再次设定margin-left为0时,实现右滑。
对于滑动事件监听,通过监听鼠标(手)指按下和抬起来实现,根据两点的X坐标的差值的正负判定是右滑还是左滑。
<强>完整代码
需要注意的是,我在测试的时候用的是铬的普通模式和移动模拟器模式,发现两种模式下监听是不一样的,因此我写了两种监听,这样至少有一种会执行。也许有其他更好的适配方法,但不作为此处的重点。当然也欢迎大家赐教。
至于代码部分,用了jQuery,其实不用也没啥问题的,动画滑动和监听都可以用纯js写,但是由于这不是这里的重点,那么为什么不用jQuery呢?成功者站在巨人的肩膀上,而且咱也没有jQuery写的好(?”ω&急性;?)
<强> 2015/11/13更新
有位同学提出说代码在QQ手机浏览器和歌剧手机浏览器等中没有滑动效果,找了一下大概是帖子里说的原因,于是根据帖子里的提示以及那位同学的一个大神同学的提示,做了一下修改。主要是在touchmove事件中根据横纵坐标位移来判断是否阻止默认事件,如下:
<>强2016/02/25更新
qq_25558115同学提到:“如果再能给大家提供出只能有一条记录可以左滑,倘若滑动其他的记录,则有左滑记录的要回到原位”。于是进行了简单实现。主要思路如下:
<>强2016/09/06更新
根据马灿发同学提出的虫子进行修改:
右滑时进行判断,仅当要右滑的对象(pressedObj)是上一次左滑的对象(lastLeftObj)时才将对象右滑并清空lastLeftObj。
根据girlyougo同学的提议,添加”在除本行外的其他区域点击时均复位当前左滑按钮”的功能。思路为在滑动结束时,判定pressedObj !=lastLeftObj,即可知点击/滑动的对象为其他对象:
实际上,在添加了上述功能之后,前面提到的错误不存在的了。不过此处保留了消除虫的那部分代码。
更新后的完整代码如下:
