原生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左侧滑动删除效果左.
其用有更好的优化代码,请留言,一同学习
原生H5页面模拟APP左侧滑动删除效果的更多相关文章
- iOS H5页面打开APP技术总结
iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links.其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以 ...
- 【转】Android 实现ListView的滑动删除效果
http://www.cnblogs.com/weixiao870428/p/3524055.html http://download.csdn.net/download/love_javc_you/ ...
- h5页面唤起app(iOS和Android),没有安装则跳转下载页面
浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...
- 微信H5页面唤醒APP并传参跳转uniapp
主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP 在链接https://developers.weixin.qq.com/ ...
- ListView滑动删除效果实现
通过继承ListView然后结合PopupWindow实现 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0" ...
- android中listview的item滑动删除效果(已解决listview点击问题)
领导看到iphone上tableview有个滑动删除的效果,要求在android上也实现,搜了下资料,实现起来比较简单,可弄到后面,居然不能点击了,把一篇文章中的代码修改了一下,捣鼓了一番,搞定,下面 ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
- 模仿qq列表信息滑动删除效果
这个效果的完成主要分为两个部分 自定义view作为listview的列表项 一个view里面包括 显示头像,名字,消息内容等的contentView和滑动才能显示出来的删除,置顶的右边菜单menuVi ...
- vue实现左侧滑动删除
不是很完美,无法做到第一个左滑其他的隐藏删除: 代码来源于 https://segmentfault.com/a/1190000011062124 自己做了写改动,添加父组件点击触发子组件 引入组件 ...
随机推荐
- 国内技术管理人员批阅google的“春运交通图”项目
在整理一份报告的时候,偶然看到2008年春节期间google推出的“春运交通图”项目建设历程报道,很受启发,随以国内的技术管理人员眼光批阅了这篇文章,同时也是自嘲吧. 以下黑色字体是原报道,红色字体是 ...
- Hamming correct
从数的最左边开始,并标记为1 将2的平方的位置留出来,做为校验位例如,8位2进制数10011010===>_ _ 1 _ 0 0 1 _ 1 0 1 0 位置1用来校验最右边的位位1的位置1 3 ...
- Android 用SQLite 使用 CursorLoader 中的数据填充列表视图
我做了简单的测试应用程序基于此示例.有一个按钮,插入到数据库和列表视图的数据.都是在 MainActivity 中.在原来的代码是restartLoader() 仅从调用 onResume() ,但它 ...
- [CSS3] Create a fixed-fluid-fixed layout using CSS calc()
CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you nee ...
- 数据结构与算法实验题 4.2 Who is the strongest
数据结构与算法实验题 4.2 Who is the strongest ★实验任务 在神奇的魔法世界,召唤师召唤了一群的魁偶.这些魁偶排成一排,每个魁偶都有一个 战斗值.现在该召唤师有一个技能,该技能 ...
- 重新配置vim
重新配置,并非折腾,发个链接吧留着以后用。 都是前辈 vimer程序员的世界 Vim(gvim)配色方案推荐 gvim(vim)使用微软雅黑中文字体 Vim(gvim)编程字体推荐 所需即所获:像 I ...
- HDoj-1163- Digital Roots
Problem Description The digital root of a positive integer is found by summing the digits of the int ...
- C++中string类的操作函数。
相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有没有这样使用起来非常方便的类呢?答案是肯 ...
- [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes
Learn how to target elements based on their position inside of a parent element in relation to its s ...
- 用Apache Ivy实现项目里的依赖管理 分类: C_OHTERS 2014-07-06 18:11 564人阅读 评论(0) 收藏
Apache Ivy是一个管理项目依赖的工具. 它与Maven Apache Maven 构建管理和项目管理工具已经吸引了 Java 开发人员的注意.Maven 引入了 JAR 文件公共存储库的概念 ...