hammer滑动删除

最新推荐文章于 2021-06-27 00:52:59 发布

kongjunchao159

最新推荐文章于 2021-06-27 00:52:59 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： hammer

本文链接：https://blog.youkuaiyun.com/kongjunchao159/article/details/50720908

hammer 专栏收录该内容

1 篇文章

订阅专栏

使用hammer.js实现移动端常见的滑动删除效果

需先引入hammer.js和jquery.hammer.js，以此使用jquery语法来调用hammer.js插件

例子：

<body>
<ul>
	<li>XXXXXX</li>
	<li>删除</li>
</ul>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/jquery.hammer.js"></script>
<script>

//滑动删除
var ul = $('ul');
ul.hammer().bind('swipeleft',function(){
	$(this).addClass('active');		//使用transition过渡写滑动动画
})
ul.hammer().bind('swiperight',function(){
	$(this).removeClass('active');
})
//点击删除
$('ul li:nth-child(2)').on('click',function(){
	$(this).parent('ul').remove();
})

</script>

hammer.js官网： http://hammerjs.github.io/

中文文档：http://www.tuicool.com/articles/VNRjym7