H5页面模拟app滑动删除
来源:互联网 发布:如何删除筛选后的数据 编辑:程序博客网 时间:2024/05/18 11:11
最近一直在研究如何做到app那样左滑动删除,长按删除,如今终于解决了这个问题//H5页面模拟app滑动删除<!DOCTYPE HTML><head><meta charset="UTF-8"><title>原生H5页面模拟APP侧滑删除效果</title><meta name="format-detection" content="telephone=no, email=no" /><meta content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport"><style>*{ margin:0; padding:0; list-style:none}body{ font-size:0.12rem; color:#666;}.ui-loader{ display:none}.my-address-list{overflow: hidden;}.my-address-list .touch{background-color: #fff;border-bottom:0.01rem solid #bfc0c0;border-top:0.01rem solid #bfc0c0;margin-top:0.12rem;overflow: hidden;position: relative;}.my-address-list .item.selected{-webkit-transform: translate(-18%,0);-webkit-transition:all 0.3s linear;}.my-address-list .item{overflow: hidden;padding:0 0.15rem;width: 120%;-webkit-transition:all 0.3s linear;}.my-address-list .item a{display:block;float: left; background-color: #ff0000;color: #fff;width: 20%;margin-left: 0.16rem;font-size: 0.14rem;text-align: center; text-decoration:none;}.my-address-list .item .list{overflow: hidden;width: 2.7rem;font-size: 0.14rem;float: left;}.my-address-list .item .list .name-phone{overflow: hidden;margin-top:0.05rem;}.my-address-list .item .list .name-phone span{display: inline-block;}.my-address-list .item .list .name-phone span.name{float: left;}.my-address-list .item .list .name-phone span.phone{float: right;}.my-address-list .item .list .address-info{margin:0.06rem 0;width: 100%;overflow: hidden;white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis;}.my-address-list .item .icon2{overflow: hidden;float: left;margin-left:0.05rem;}.my-address-list .item .icon2 i{width: 0.14rem;height: 0.14rem;margin-top:0.15rem;display: inline-block;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA0CAYAAACZ8ljPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMjZBRDJENDIwOTgxMUU1QkQ1MjkzQTlGNEU3MTc0OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMjZBRDJENTIwOTgxMUU1QkQ1MjkzQTlGNEU3MTc0OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQyNkFEMkQyMjA5ODExRTVCRDUyOTNBOUY0RTcxNzQ4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQyNkFEMkQzMjA5ODExRTVCRDUyOTNBOUY0RTcxNzQ4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0Y0qkAAAASpJREFUeNq81ksOgjAQANAyXsD7uVJXEjdSjyGuDCQmGo9o9ABYtJAgv3Z+kzQspuG10w4hyQ7ZyhhzMb+w+Tm/G8EAjy39uNnM7qTB/ygk0Rq0mij4M0u10G9JHVpqoe0ZaqGdS6OB9m6pNDrUFqIojCWkUJhKSqAwN4EbhZBJnCiETuRCIWZ1HCjEngEVBcxNo6CA7ScsCpSvBgYlgRiUDMaiLGAMygaGoklVVew/Sv7lxUBqDUYgJnZ6EgFFGh9Z0iMoYqkr9QMUsZK1pCEYGxiKsYAxGBmMxUggBkODWAwFUrBokIpFgRxYMMiFBYGc2CzIjU2CEtgoKIUNgpJYD5TGOqAG1oJaWB2L9+u9cc+rBtbsMNfCxtpCDGvAvRtPP7aSWB0fAQYAnk/ypwazBP8AAAAASUVORK5CYII=) no-repeat center center;background-size: 50%;}.my-address-list .item .mark{background: rgba(0,0,0,0.4);position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 100;text-align: center;}.my-address-list .item .mark span{display: inline-block;padding:0.05rem 0.1rem;color: #fff;border:0.02rem solid #fff;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}</style><script> var fontSize = 100; var elm = document.documentElement; elm.style.fontSize = fontSize * (elm.clientWidth/320) + 'px';</script></head><body><span style="display:none;"></span><!-- 代码部分begin --><div class="my-address-list" id="my-address-list"> <div id="cc-loading"><span></span>玩命加载中...</div></div><script src="http://apps.bdmg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://apps.bdmg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script>$(function(){ document.getElementById('cc-loading').style.display = 'none'; for(var i=0;i<10;i++){ var cont = '<div class="touch" id="touch'+i+'"><div class="item" userAddressId="1"><div class="list">'; cont += '<div class="name-phone"><span class="name">收货人姓名</span>'; cont += '<span class="phone">12345678912</span></div>'; cont += '<div class="address-info">这里是收货人姓名</div>'; cont += '</div><div class="icon2"><i></i></div><a href="javascript:;" class="remove">删除</a></div></div>'; $('#my-address-list').append(cont); } $(".item").each(function(){ var h = $(this).find(".list").height(); $(this).find("a").height(h+"px").css("line-height",h+"px"); $(this).find(".icon2").height(h+"px"); }) $(".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'); })})</script><!-- 代码部分end --></body></html>
长按删除效果:
<body>
<div class="butlong" style="position:relative;">
<input type="button" value="长按删除" class="delete"/>
<a style="position:absolute; left:90px; top:0; color:red; display:none;" class="deletefont">删除</a>
</div>
</body>
<script src="js/zepto.min.js"></script>
<script type="text/javascript">
// 长按
$.fn.longPress = function(fn) {
var timeout = undefined;
var $this = this;
for(var i = 0;i<$this.length;i++){
$this[i].addEventListener('touchstart', function(event) {
timeout = setTimeout(function(e){
$('.deletefont').show();
}, 800); //长按时间超过800ms,则执行传入的方法
}, false);
$this[i].addEventListener('touchend', function(event) {
clearTimeout(timeout); //长按时间少于800ms,不会执行传入的方法
}, false);
}
}
$('.delete').longPress(function(e){
});
$('.deletefont').on('touchend',function(){
$('.delete').remove();
$('.deletefont').remove();
})
- H5页面模拟app滑动删除
- H5页面唤起app
- h5页面打开APP
- h5实例-上下滑动页面
- h5页面滑动效果实例
- 手机H5页面滑动事件
- H5页面仿原生列表会话左滑显示删除键--整体滑动
- H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动
- H5页面如何唤醒app
- h5页面唤起本地APP
- app和H5页面交互
- app内h5页面调用app功能
- H5手机页面滑动异步加载数据
- 移动端H5页面,上下滑动翻页
- js模拟手机滑动页面
- H5+App的页面预载优化
- 短信或h5页面唤起android app
- H5下载打开APP页面通用模板
- springboot日志篇
- LeetCode:M-2. Add Two Numbers
- 第二周项目 2—C/C++语言中函数参数传递的三种方式
- 树形DP HDU 6201
- 双目相机的畸变校正以及平行校正(极线校正)的入门问题总结
- H5页面模拟app滑动删除
- QT第三方库:Qwt的安装与使用
- 继承,求矩形和圆的周长面积
- <9/10>集训周记
- JDBC事务及事务的隔离级别
- The study of recursive function in Python(20170910)
- 博弈知识汇总
- [hdu-4006]The kth great number 题解
- Interchange Roman and Integer