原生H5页面模拟APP左侧滑动删除效果

话不多说，往左侧滑动,显示删除，我们先来看一下效果图：如下：

 

这个布局我就不多说，反正就是一行ul,li，

class名“item”

js代码如下:

$(".item").on("swipeleft",function(){
　　$(this).addClass('selected').parents(".touch").siblings().find(".item").removeClass('selected');
　　$(this).find("a.remove").on("click",function(){
　　var touchId = $(this).parents(".touch").attr("id");
　　//执行删除效果
　　$("#"+touchId).css("border","0");
　　　$("#"+touchId).stop().animate({
　　　　height:"0",
　　　　margin:"0"
　　　　},300,function(){
　　　　$(this).remove();
　　})
})
}).on("swiperight",function(){
　　$(this).parents(".touch").find(".item").removeClass('selected');
})

其中要增加一下zepto.min.js调用,就能达到app左侧滑动删除效果左.

其用有更好的优化代码,请留言,一同学习

转载于:https://www.cnblogs.com/0liaoyi/p/6030878.html