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

这个布局我就不多说,反正就是一行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. mysql 表的timestamp为自动添加

    新设计表时可以执行语句: `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP C ...

  2. sql基础知识集锦

    Sql常用语法 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT ...

  3. 【习题 3-7 UVA - 1368 】DNA Consensus String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举每一位字母是什么. 从小到大枚举. 然后计算每一位的总贡献是多少. 取最小的那个输出. [代码] #include <bi ...

  4. 函数的引用透明性(referential transparency)

    1. 基础 初学程序设计时,比较容易混淆的两个概念是数学函数(math function)和程序中使用的函数. 在数学函数中 y=f(x),一个输入值有固定的输出值.例如,无论计算多少次,sinπ 的 ...

  5. get_slave_status.py

    #!/usr/bin/env python#-*- encoding: utf8 -*- import mysql.connectorimport get_mysql_conn_info    &qu ...

  6. 28、应用调试之strace命令来跟踪系统调用

    strace是个工具,在使用时需要先按照,见韦东山书籍: 1.tar xjf starce-4.5.15.tar.bz2 2.cd strace-4.5.15/ 3.patch -p1 < .. ...

  7. WPF应用程序启动的问题(自定义Main函数启动)

    问题引入: 一般WPF创建之后可以直接运行并不需要编写Main函数指定入口,但是在开发的过程中会遇到一些情况需要自定义Main让WPF从指定的Main函数中进行启动,这样可能会更好控制一点.但是我们再 ...

  8. [Angular] Creating an Observable Store with Rx

    The API for the store is really simple: /* set(name: string, state: any); select<T>(name: stri ...

  9. php实现调整数组顺序使奇数位于偶数前面

    php实现调整数组顺序使奇数位于偶数前面 一.总结 1.array_push()两个参数,$arr在前 2.array_merge()的返回值是数组   二.php实现调整数组顺序使奇数位于偶数前面 ...

  10. [内核编程] Windebug双机调试环境搭建

    Windebug双机调试环境搭建    开始进行内核编程/驱动编程的调试工作是非常烦人的,由于程序运行与内核层不受操作系统的管控,所以容易引起主机蓝屏和崩溃是常有的事.这也就使得内核程序的调试成了一大 ...