原生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 自己做了写改动,添加父组件点击触发子组件 引入组件 ...
随机推荐
- uva 10098 Generating Fast(全排列)
还是用的两种方法,递归和STL,递归那个是含有反复元素的全排列,这道题我 没有尝试没有反复元素的排列,由于从题目上并没有发现一定是有反复元素的() 贴代码: <span style=" ...
- iOS开发 非常全的三方库、插件、大牛博客等等
UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableVie ...
- Android Studio设置图片背景及主题设置
因为Android Studio是基于IDEA的,所以IDEA里面能用的插件Android Studio也能用,这次图片背景是依赖IDEA下的一个插件,名为BackgroundImage的插件,用户可 ...
- 【习题 3-5 UVA-227】Puzzle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.. 输入稍微恶心了点. getchar()一个一个搞就好. [代码] #include <bits/stdc++.h& ...
- [TypeScript] Sharing Class Behavior with Inheritance in TypeScript
Typescript classes make inheritance much easier to write and understand. In this lesson we look into ...
- Codeforces Round #315 (Div. 2) (ABCD题解)
比赛链接:http://codeforces.com/contest/569 A. Music time limit per test:2 seconds memory limit per test: ...
- Spring资源抽象Resource
JDK操纵底层资源基本就是 java.net.URL .java.io.File .java.util.Properties这些.取资源基本是根据绝对路径或当前类的相对路径来取.从类路径或Web容器上 ...
- WPF遍历当前容器中某种控件的方法
原文:WPF遍历当前容器中某种控件的方法 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/79 ...
- [PostgreSQL] Ensure Uniqueness in Postgres
Let’s say we have a bank. Our bank wants to give each account for each user a unique name, for insta ...
- 百度地图 layer弹出地图 获取坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...