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

这个布局我就不多说,反正就是一行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. 8.Swift教程翻译系列——控制流之条件

    3.条件语句 常常会须要依据不同的情况来运行不同的代码. 你可能想要在错误发生的时候运行一段额外的代码,或者当某个值变得太高或者太低的时候给他输出出来.要实现这些需求,你能够使用条件分支. Swift ...

  2. POJ 1166 The Clocks 高斯消元 + exgcd(纯属瞎搞)

    依据题意可构造出方程组.方程组的每一个方程格式均为:C1*x1 + C2*x2 + ...... + C9*x9 = sum + 4*ki; 高斯消元构造上三角矩阵,以最后一个一行为例: C*x9 = ...

  3. clear属性来取消浮动

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  4. akka---Getting Started Tutorial (Java): First Chapter

    原文地址:http://doc.akka.io/docs/akka/2.0.2/intro/getting-started-first-java.html Introduction Welcome t ...

  5. Android layer-list的属性和使用具体解释

    Android layer-list的属性和使用具体解释.layer-list是用来多个图层堆叠显示的,借这个特性能够做一些特别的效果(比方:阴影.以下的效果等),也能够投机取巧. 1.代码片 < ...

  6. [WASM] Create and Run a Native WebAssembly Function

    In this introduction, we show a simple WebAssembly function that returns the square root of a number ...

  7. php BC高准确度函数库

    <? php *************************************************************************************** *p ...

  8. [Ionic2] Device Interaction in an Ionic App with Cordova Plugins

    In this lesson, we are going to learn how to interact with native components through Cordova plugins ...

  9. stm32的dac

  10. ios开发runtime学习二:runtime交换方法

    #import "ViewController.h" /* Runtime(交换方法):主要想修改系统的方法实现 需求: 比如说有一个项目,已经开发了2年,忽然项目负责人添加一个功 ...