原生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 自己做了写改动,添加父组件点击触发子组件 引入组件 ...
随机推荐
- nyoj999 师傅又被妖怪抓走了 (预处理+bfs+状态压缩)
题目999 题目信息 执行结果 本题排行 讨论区 师傅又被妖怪抓走了 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 话说唐僧复得了孙行者,师徒们一心同体,共诣西方.自宝 ...
- POJ 2236 Wireless Network ||POJ 1703 Find them, Catch them 并查集
POJ 2236 Wireless Network http://poj.org/problem?id=2236 题目大意: 给你N台损坏的电脑坐标,这些电脑只能与不超过距离d的电脑通信,但如果x和y ...
- 8.5 Android灯光系统_源码分析_通知灯
参考文章(应用程序举例)how to use the LED with Android phonehttp://androidblogger.blogspot.jp/2009/09/tutorial- ...
- 【BZOJ 3998】弦论
[链接]h在这里写链接 [题意] 给你一个长度为n的子串; 让你求出第k小的子串是什么; 输出答案的类型分两种; 第一种,重复的算两次,第二种,重复的算一次. ...
- [Angular] Learn Angular Multi-Slot Content Projection
Now for au-modal component, we pass in tow component though contenct projection: <au-modal class= ...
- FATFS在SD卡里,写入多行数据出的问题
串口接收的数据存入数组,然后把数组截取有效部分,存入SD卡里的一行没有问题 但是从SD卡读出这一行之后,重新写入SD卡就有了问题,经过调试发现,错误在于 \n 一直是这一串数据,为什么会出错呢??? ...
- POJ 1979 Red and Black (zoj 2165) DFS
传送门: poj:http://poj.org/problem?id=1979 zoj:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problem ...
- [PReact] Handle Simple Routing with preact-router
Some applications only need a very minimal routing solution. This lesson will cover a practical exam ...
- 并查集(disjoint set)的实现及应用
这里有一篇十分精彩.生动的 并查集详解 (转): "朋友的朋友就是朋友"⇒ 传递性,建立连通关系 disjoint set,并查集(一种集合),也叫不相交集,同时也是一种树型的数据 ...
- 屏蔽OCulus Rift的官方警告的方法实测
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/45870243 作者:car ...