用法:
给需要添加左滑功能的元素添加以下属性:
data-swipe-item
给左滑显示出来的元素添加如下属性:
data-swipe-item-fixel
源码:
;(function (window, document, $, undefined) { "use strict"; var startPoint, $currentEl, $fixEl, moving = false, $rootEl = $(document.documentElement), openSwipeEl = null, $callback = function(){}; function touchMove(event) { var touch = event.touches[0], diffX = touch.clientX - startPoint.x, diffY = Math.abs(touch.clientY - startPoint.y), fixElWidth = $fixEl.width(), translated, translatedLeft = ($currentEl.data("translatedLeft") || 0) + diffX; if (translatedLeft > 0) { translatedLeft = translatedLeft / 10; } else if (translatedLeft < -fixElWidth) { translatedLeft = -fixElWidth; } $currentEl.data("isShow", translatedLeft < -fixElWidth * 0.5); translated = "translate3d(" + translatedLeft + "px,0,0)"; // 阻止默认行为,用于修复android4下不会触发touchend事件的bug,针对android且为左滑状态时,才阻止默认事件 if($$.isAndroid() && diffX < -5 && diffY < 5){ $currentEl.css({ "-webkit-transform": translated, transform: translated }); event.preventDefault(); }else if(!$$.isAndroid()){ $currentEl.css({ "-webkit-transform": translated, transform: translated }); } openSwipeEl = $currentEl; } function touchEnd(event) { $rootEl.off("touchmove", touchMove); $rootEl.off("touchend", touchEnd); $rootEl.off("touchcancle", touchEnd); moving = false; if (null === event) { return; } var translatedLeft = $currentEl.data("translatedLeft"), fixElWidth = $fixEl.width(), translated, halfFixElWidth = fixElWidth / 2; if ($currentEl.data("isShow")) { translatedLeft = -fixElWidth; openSwipeEl = $currentEl; } else { translatedLeft = 0; openSwipeEl = null; } $currentEl.data("translatedLeft", translatedLeft); translated = translatedLeft ? "translate3d(" + translatedLeft + "px,0,0)" : ""; $currentEl.css({ "-webkit-transform": translated, transform: translated }); $callback(); $currentEl.addClass('anim'); } function touchStart(event,callback) { var touches = event.touches; $currentEl = $(event.currentTarget); $callback = function(){ callback($currentEl); }; $fixEl = $currentEl.children("*[data-swipe-item-fixel]"); if (touches.length > 1) { return; } startPoint = { x: touches[0].clientX, y: touches[0].clientY }; $currentEl.removeClass('anim'); $rootEl.on("touchmove", touchMove); $rootEl.on("touchend", touchEnd); $rootEl.on("touchcancle", touchEnd); } $.fn.swipeMenu = function (callback) { var $el = $(this); $el.delegate("*[data-swipe-item]", "touchstart", (function(){ return function(event){ touchStart.apply($el, [event, callback]); } })()); }; function hideSwipe() { var translated = ""; //openSwipeEl = $("*[data-swipe-item]"); if (openSwipeEl) { openSwipeEl .css({ "-webkit-transform": translated, transform: translated }) .data("isShow", 0) .data("translatedLeft", 0); openSwipeEl = null; } } $(document).delegate('body', 'touchstart', function () { hideSwipe(); }); }(window, document, Zepto));
相关推荐
android左滑插件 ,很适用 的一个插件 。
没有用插件实现的左滑出现红色删除键的列表,可定义多个按钮
微信小程序左滑操作的自定义组件,小程序开发项目常用WeChatApp-slip-master.zip
web或手机端 仿苹果侧滑删除的html代码,可以完美实现
这里面包含的有安卓的左滑删除demo,还有js,jquery mobile 插件左滑删除demo
仿照QQ的信息列表的左滑删除交互操作
主要为大家详细介绍了android实现一个简单左滑删除控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
博文源码,文章链接:http://write.blog.csdn.net/postedit/50619638
swipelistview仿微信左测滑动删除
基于jQuery的图片轮播插件,包括渐隐、上滑、左滑等效果
年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也...
[x] 左滑取消操作、删除 [x] 单选按钮,复选按钮,on/off开关 [x] checkbox全选/全不选 [x] toast(warning,danger) [x] 横向可滑动tabbar [x] 图片翻页动画 [x] 瀑布流图文 [ ] 自定义...
前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现。但是,有时会发现按钮影响美观,甚至影响列表行的布局。稍在网上搜索无果,而写此仿苹果滑屏删除控件
这是一个简单的仿照微信的向左滑动显示删除效果。存原生js,无需引用其他插件
react-h5-calendar 简体中文 | 造一个小轮子,核心文件不到三百行,一款基于 react 的移动端 , mobile, h5 日历展示组件 我这个只是精简版的日历 ,大而全的可参考 demo 扫描二维码直接查看 demo 直接打开浏览器查看 ...
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时...下面是我后来实现后的代码,其实就是用了原生js的touch事件,再结合触摸点的坐标来判断左滑和右滑, <!DOCTYPE html> <html> <hea
一个简单的侧滑页面,也可以修改为左滑。 安卓抽屉,向右侧滑动弹出list列表,list列表也可以进行其他UI定制,灵活性很大,SDK21,android studio编译。 一个简单的侧滑页面,也可以修改为左滑。 安卓抽屉,向右侧...
一个让你在石墨文档来去自如的插件 进入石墨文档的文档/表格页面,按 alt + ~ 或 ctrl + ~ 或 options + ~ 呼出界面,会显示最近访问过的文档及其预览。点击在当前页面打开,按住 alt 或 ctrl 点击可在新页面打开。...
移动端模拟滚动插件 在安卓4.3及以下内核的浏览器中,默认事件处理并不会促发touchend事件,仅能依靠event.preventDefault()来取消默认事件处理动作,但却会导致页面无法滚动。 若需要同时支持页面滚动和检测滑动...