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

这个布局我就不多说,反正就是一行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. Hypervisor, computer system, and virtual processor scheduling method

    A hypervisor calculates the total number of processor cycles (the number of processor cycles of one ...

  2. 【BZOJ 1146】【CTSC 2008】网络管理network

    一句话题意,树链上带改动区间第k大 感觉能够dfs+主席树O(nlog2n)过掉,但我不会写= = 于是写的线段树套平衡树+链剖+二分(改动O(nlog3n),查询O(nlog4n)慢了好多啊QAQ) ...

  3. Web安全之Cookie劫持

    1. Cookie是什么? 2. 窃取的原理是什么? 3. 系统如何防Cookie劫持呢? 看完这三个回答, 你就明白哪位传奇大侠是如何成功的!!! Cookie: HTTP天然是无状态的协议, 为了 ...

  4. vuex概念总结及简单使用实例

    原文 简书原文:https://www.jianshu.com/p/0546983f5997 大纲 1.什么是Vuex 2.什么是“状态管理模式”? 3.什么情况下应该使用 Vuex? 4.Vuex和 ...

  5. AE中Identify查询工具的实现

    原文 AE中Identify查询工具的实现 主要实现点击查询并闪烁显示,并把查询要素的信息通过DataGridView显示出来,主要用到的接口: IIdentity.IArray.IIdentifyO ...

  6. Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击

    创建一个新的Scene,并按 Unity插件之NGUI学习(2)创建UI Root. 准备工作,制作Font.如今Project窗体创建一个Font目录.然后从系统自带字体目录中选择自己须要的字体,我 ...

  7. kafka集群操作指南

    目录 kafka集群操作指南 (一)单机版安装 (二)集群安装 (三)集群启停操作 (四)topic相关的操作 (五)某个broker挂掉,本机器可重启 (六)某个broker挂掉且无法重启,需要其它 ...

  8. POJ 3211 Washing Clothes 0-1背包

    题目大意: xxx很懒,但他有个漂亮又勤奋的女友 (尼玛能不能不刺激我,刚看到这题的时候发现自己的衣服没洗!!!) 可以帮他洗衣服. 洗衣服的时候要求不同的颜色的衣服不能同时洗.一人洗一件的话,问最短 ...

  9. 【z08】乌龟棋

    描述 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起点出发走到终点 ...

  10. spring mvc controller间跳转 重定向 传参(转)

    spring mvc controller间跳转 重定向 传参 url:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ ...