html5滑动删除置顶,js实现移动端向左滑动删除效果
使用插件alloy_finger.js
(vue方法使用)
1.引用js
2.html方法的使用
3.js方法的使用
Vue.use(AlloyFingerVue);
var vm=new Vue({
el:'#container',
methods:{
swipe:function(e){
console.log(e);
var _content = md_lib.parents(e.target,'cart_item_content');
if (e.direction == 'Left') {
console.log('向左滑动了');
}
if (e.direction == 'Right') {
console.log('向右滑动了');
}
}
}
})
原生
content="IE=edge,chrome=1">
Examples
content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
*{
margin: 0;
padding: 0;
list-style: none;
}
body,html{
height: 100%;
width:16rem;
overflow:hidden;
}
ul{
width:16rem;
height:28.4rem;
}
li{
width:20rem;
height:2rem;
line-height: 2rem;
background:pink;
}
.div1{
width:16rem;
height:2rem;
float:left;
}
.del{
width:4rem;
height:2rem;
background:red;
float:left;
text-align: center;
line-height: 2rem;
color:#fff;
}
//设置html的字体大小,方便使用rem布局
(function(win,doc){
function change(){
doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320+'px';
}
change();
win.onresize = change;
})(window,document);
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('ul');
var aLi=document.querySelectorAll('li');
var aDiv=document.querySelectorAll('.div1');
var aDel=document.querySelectorAll('.del');
var n=0;
for(var i=0;i
console.log(i);
aLi[i].index=i;
//滑动开始
aLi[i].addEventListener('touchstart',function(ev){
ev.preventDefault();
var oldX=ev.targetTouches[0].pageX;
console.log(oldX);
function fnMove(ev){
ev.preventDefault();
var newX=ev.targetTouches[0].pageX-oldX;
aLi[this.index].style.transform='translateX('+newX+'px)';
}
function fnEnd(ev){
aLi[this.index].removeEventListener('touchmove', fnMove,false);
aLi[this.index].removeEventListener('touchend', fnEnd,false);
ev.preventDefault();
var changeX=ev.changedTouches[0].pageX;
if(oldX-changeX > 40){
aLi[this.index].style.transition='1s all ease';
aLi[this.index].style.transform='translateX(-4rem)';
}else{
aLi[this.index].style.transform='translateX(0)';
}
}
aLi[this.index].addEventListener('touchmove', fnMove,false);
aLi[this.index].addEventListener('touchend', fnEnd,false);
},false)
//删除按钮
aDel[i].index=i;
aDel[i].addEventListener('touchstart', function(){
this.innerHTML='';
this.style.height='0';
this.style.transition='0.5s all ease';
aLi[this.index].style.height='0';
aLi[this.index].style.transition='0.5s all ease';
aDiv[this.index].style.height='0';
aDiv[this.index].style.transition='0.5s all ease';
aDiv[this.index].innerHTML='';
this.addEventListener('transitionend',function(){
oUl.removeChild(aLi[this.index]);
}, false)
},false)
}
},false)
- 1删除
- 2删除
- 3删除
- 4删除
- 5删除
- 我只是一个单纯的div删除
- 7删除
html5滑动删除置顶,js实现移动端向左滑动删除效果相关推荐
- autojs左右滑动脚本代码_Swiper.js实现移动端元素左右滑动
swiper.js也是一个很好用的移动端的js库. 需要引入它的css文件和js文件.用法很简单,加入相应的类即可,看一下Demo,很容易看懂. 我的例子如下: Swiper demo body { ...
- html5滑动删除置顶,html5向左滑动删除特效
html5向左滑动删除特效 * { padding: 0; margin: 0; list-style: none; } header { background: #f7483b; border-bo ...
- android 广告栏效果,叫教你打造一个滑动悬浮置顶的视觉效果,给你的广告栏增加一些特色...
一个滑动悬浮置顶的View,通过自定义ScrollView来实现一个精美的固定悬浮效果 效果图: 这个特效其实没有那么复杂! 思路: 自定义ListView对头布局进行处理 自定义 RecycleVi ...
- Android RecyclerView滑动标题置顶
实现先来看看效果图(由于不会制作gif图所以) 如上图 左边可以点击切换到该标题的子item 右边可以通过滑动更换置顶标题 步骤开始: 一: 导入第三方 implementation 'com.ku ...
- android listview标题置顶,Android仿QQ左滑删除置顶ListView操作
最近闲来无事,于是研究了一下qq的左滑删除效果,尝试着实现了一下,先上效果图: 大致思路原理: - 通过设置margin实现菜单的显示与隐藏 - 监听onTouchEvent,处理滑动事件 上代码 i ...
- h5移动端滑动内容置顶
就想很多导航栏一样,这次是一个列表类型的滑动置顶需求,首先引入jquery,然后进行操作. <script type="text/javascript" src=" ...
- html滚动条怎么置顶,js控制滚动条到最底端(置底)和最顶端(置顶)
滚动条样式: body { SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SHADOW-CO ...
- html5数组删除相同数据,js数组相减简单示例【删除a数组所有与b数组相同元素】...
js数组相减简单示例[删除a数组所有与b数组相同元素] 本文实例讲述了js数组相减.分享给大家供大家参考,具体如下: js数组相减 function arrChange( a, b ){ for (v ...
- html消息页左滑删除模板,基于JS实现移动端左滑删除功能
基于JS实现移动端左滑删除功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于JS实现移动端左滑删除功能,编程之家小编觉得挺不错的,现 ...
最新文章
- Linux常用命令及技巧1
- docker 使用python 镜像运行python脚本
- .net 获取字符串中的第一个逗号的位置_用EXCEL合并同列字符串
- 服务器文件后缀都加了re,已解决: Re: 修改了备份服务器客户端的别名之后所有的备份都出错了 - Dell Community...
- HTTP 302报文
- hive 去重 字符串_hive函数
- 【华为云技术分享】HDC.Cloud | 为防止交通事故,95后学生运用“黑科技”这样做!
- 关于2017年总结及2018年计划
- 从光波叠加到条纹分布的matlab仿真,matlab光学仿真实验 13171019
- 【如何提取软件图片素材资源】
- 谷歌插件FeHelper的安装和使用
- WebService--了解wsdl文件
- 数学建模 - 时间序列分析
- 老旧小区智慧用电改造方案
- PHP PDF转图片:设置图像的色彩空间 RGBCMYK互转
- 麦子学院C++学习笔记
- 案例实战|泰坦尼克号船员获救预测(数据预处理部分)
- 修改《植物大战僵尸》的游戏存档
- 人机对战五子棋(权值法)
- [GitHub] JavaScript 趋势榜项目(第30周)