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

这个布局我就不多说,反正就是一行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左侧滑动删除效果左.

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

原生H5页面模拟APP左侧滑动删除效果的更多相关文章

  1. iOS H5页面打开APP技术总结

    iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links.其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以 ...

  2. 【转】Android 实现ListView的滑动删除效果

    http://www.cnblogs.com/weixiao870428/p/3524055.html http://download.csdn.net/download/love_javc_you/ ...

  3. h5页面唤起app(iOS和Android),没有安装则跳转下载页面

    浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...

  4. 微信H5页面唤醒APP并传参跳转uniapp

    主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP   在链接https://developers.weixin.qq.com/ ...

  5. ListView滑动删除效果实现

    通过继承ListView然后结合PopupWindow实现 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0" ...

  6. android中listview的item滑动删除效果(已解决listview点击问题)

    领导看到iphone上tableview有个滑动删除的效果,要求在android上也实现,搜了下资料,实现起来比较简单,可弄到后面,居然不能点击了,把一篇文章中的代码修改了一下,捣鼓了一番,搞定,下面 ...

  7. 微信小程序实现滑动删除效果

    在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...

  8. 模仿qq列表信息滑动删除效果

    这个效果的完成主要分为两个部分 自定义view作为listview的列表项 一个view里面包括 显示头像,名字,消息内容等的contentView和滑动才能显示出来的删除,置顶的右边菜单menuVi ...

  9. vue实现左侧滑动删除

    不是很完美,无法做到第一个左滑其他的隐藏删除: 代码来源于 https://segmentfault.com/a/1190000011062124 自己做了写改动,添加父组件点击触发子组件 引入组件 ...

随机推荐

  1. 关于python的冒号截取

    https://zhidao.baidu.com/question/877855739656978372.html

  2. swift 数据存储

    1.plist 存储 1.利用沙盒根目录拼接“Documents”字符串 //存储 func saveArray() { // 1.获得沙盒根路径,不管是真机还是模拟机,用它是最合适不过了 let h ...

  3. 使用Samba在Linux服务器上搭建共享文件服务

    最近我们的小团队需要在服务器上共分出一个共享文件夹用于大家存放公共的资源文档, 大家想啊,这肯定很简单呀,在Windows下面只要创建相关的windows account,共享某个文件夹,把读/写权限 ...

  4. SVGALib

    SVGALib是一套运行于Linux及FreeBSD下的开放源代码低阶绘图函式库,它允许程式设计人员变更视讯模式及全屏幕图像,许多热门的电脑游戏如Quake及Doom都源自此技术. 范例 编辑 #in ...

  5. EL表达式.md

    操作符 描述 . 访问一个Bean属性或者一个映射条目 [] 访问一个数组或者链表的元素 ( ) 组织一个子表达式以改变优先级 + 加 - 减或负 * 乘 / or div 除 % or mod 取模 ...

  6. 【Codeforces Round #437 (Div. 2) A】Between the Offices

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> using n ...

  7. js课程 3-9 js内置对象定时器和超时器怎么使用

    js课程 3-9 js内置对象定时器和超时器怎么使用 一.总结 一句话总结:定时器:    1.定义    sobj=setInterval(func,1000);        2.清除    cl ...

  8. 【转载】C# winform操作excel(打开、内嵌)

    本文转载自静待"花落<C# winform操作excel(打开.内嵌)>   说明:显示的excel是利用模板创建的 using System;using System.Coll ...

  9. MongoDB集群安装与配置2.4.3版本

    mongoDB安装http://www.mongodb.org/downloads拷文件到# cp mongodb-linux-i686-2.4.1.tgz /usr/local/进入目录:# cd ...

  10. 【跟我一起学Unity3D】代码中分割图片而且载入帧序列动画

    在Cocos2dx中.对大图的处理已经封装好了一套自己的API,可是在Unity3D中貌似没有类似的API(好吧,实际上是有的,并且功能更强大),或者说我没找到. 只是这也在情理之中,毕竟Unity3 ...