原生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左侧滑动删除效果左.
其用有更好的优化代码,请留言,一同学习
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步