该组件，主要功能类似于QQ消息列表左滑出现删除、标为已读等按钮的功能；现在的版本用的是纯javaScript编写；后续会跟进 angularJs 开发的类似组件以及jquery的;
下面，就让我们来认识下怎么使用该程序；
在该程序里，总共分为四个文件：
1 .css文件夹
2. img 图片文件夹
3. js文件
4. index.html 主页面；
稍后，你可以自行下载，打开运行观看效果；
二、代码讲解
1.此html结构，为不可修改结构
-
删除
2. js代码讲解；
注：该程序主要使用js的三个事件touchstart(手指触摸事件)、startmove(手指移动)、startend(手指离开屏幕)
请认真阅读以下代码，你会对这三个事件有一个新的认识；让我们一起嗨起来吧！
//在全局运行此程序
window.addEventListener("load", autoLoad, false);function autoLoad() { var initX; //触摸位置 var initY; var moveX; //滑动时的位置 var moveY; var X = 0; //移动距离 var Y = 0; //y轴移动距离 var objX, sildeWidth = 0; //目标对象位置、功能按钮width(如删除) //yesClick:是否可以点击列表进行下一步操作; xSilde,ySilde 默认xSilde都为true(做上下 ， 左右滑动控制) var yesClick, xSilde = true, ySilde = true, xThink = '1'; window.sessionStorage.setItem("xThink", xThink); //初始化xThink //开始执行程序 window.addEventListener('touchstart', touchStart, false); /*手指触屏时的方法*/ function touchStart(event) { //通过设置的 an-z-index-up 对应dom（目的：可以选中整个li元素） ，获取父元素li () var obj = event.target.parentNode; //获取所有的li元素 var mainLi = document.querySelectorAll(".an-slide-li"); /*当点击的是功能按钮的话，初始化xThink、anObjX*/ if (event.target.className.indexOf("an-function-button") != -1) { window.sessionStorage.setItem("xThink", '1'); //初始化xThink window.sessionStorage.setItem("anObjX", '0'); } /* *btnStyle: 获取功能按钮，判断一共添加了几个按钮*btnStyleLength： btnStyle 长度*setWidth ：btnStyle 按钮宽度*/ var btnStyle, btnStyleLength, setWidth; sildeWidth = 5; //设置默认状态下点击列表可进行下一步 yesClick = true; /*判断如果最终的值小于0 ， 关闭已经出现的动画；禁止li点击事件（此值在end方法中会被重新赋值，再作判断）*/ var anObjX = window.sessionStorage.getItem("anObjX"); if (anObjX == null) { anObjX = 0; } if (anObjX < 0) { event.preventDefault(); for (var i = 0; i < mainLi.length; i++) { mainLi[i].style.transition = "transform 0.1s"; //延缓动画效果 mainLi[i].style.transform = "translateX(0rem)"; mainLi[i].style.WebkitTition = "transform 0.1s"; //延缓动画效果 mainLi[i].style.WebkitTransform = "translateX(0rem)"; } yesClick = false; event.stopPropagation(); //事件冒泡，禁止上下滑动； } /*判断是否点中删除按钮*/ if (event.target.parentNode.className === "btn") { event.target.parentNode.onclick(); } /*判断手指所在的区域为指定li*/ if (obj.className.indexOf("an-slide-li") != -1) { initX = event.targetTouches[0].pageX; //获取手指触摸x值 initY = event.targetTouches[0].pageY; //获取手指触摸y值 objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //获取WebkitTransform 值； //自动添加 动画样式 if (!objX) { for (var i = 0; i < mainLi.length; i++) { mainLi[i].style.transition = "transform 0.1s"; //延缓动画效果 mainLi[i].style.transform = "translateX(0rem)"; mainLi[i].style.WebkitTition = "transform 0.1s"; //延缓动画效果 mainLi[i].style.WebkitTransform = "translateX(0rem)"; objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //获取WebkitTransform 值； } } } /*当=0时，执行touchMove命令*/ //console.log(); if (objX == 0) { obj.addEventListener('touchmove', touchMove, false); } obj.addEventListener('touchend', touchEnd, false); } //手指滑动方法 function touchMove(event) { //event.preventDefault(); /*xThink : 控制当出现动画时（X的最大值），点击其他任何地方动画消失， *或继续向左滑动，xThink='0',禁止touchMove事件， *触发end事件，则恢复原状xThink='1' */ xThink = window.sessionStorage.getItem("xThink"); var obj = event.target.parentNode; yesClick = false; //滑动时，点击li效果失效 //判断是否选中的是li if (obj.className.indexOf("an-slide-li") != -1) { //&&xThink == '1' moveX = event.targetTouches[0].pageX; //获取移动后的最终X值 moveY = event.targetTouches[0].pageY; //获取移动后的最终Y值 X = (moveX - initX) / 100; //变化中的X值; Y = (moveY - initY) / 100; //变化中的Y值; //判断x轴是否可以滑动 if (xSilde) { //如果X轴的变化值大于等于0，WebkitTransform = 0；不进行动画效果，否则，执行 if (X >= 0 || xThink == '0') { obj.style.WebkitTransform = "translateX(" + 0 + "rem)"; } else if (X < 0) { event.preventDefault(); //禁止默认滚动事件 var l = Math.abs(X); //取绝对值X obj.style.WebkitTransform = "translateX(" + -l + "rem)"; //实现滑动效果，删除按钮出现 //判断是否已经超出设置值 if (l > sildeWidth) { l = sildeWidth; obj.style.WebkitTransform = "translateX(" + -l + "rem)"; } } //判断X值如果大于15 ， 区分左右滑动还是上下滑动 if (Math.abs(X) >= 0.15) { Y = 0; //禁止上下滑动 ySilde = false; //禁止上下滑动 //yThink = false;//禁止上下滑动 event.preventDefault(); //禁止上下滑动 } } /*如果出现向左滑动动画，则在手指离开屏幕之前，不可以上下滚动*/ if (ySilde) { //判断y轴是否可以滑动 if (Math.abs(Y) >= 0.15) { X = 0; //禁止 左右 滑动 obj.style.WebkitTransform = "translateX(" + 0 + "rem)"; xSilde = false; //禁止 左右 滑动 //event.preventDefault(); } } } } /*手指离开屏幕方法*/ function touchEnd(event) { event.preventDefault(); var obj = event.target.parentNode; xSilde = true; ySilde = true; if (obj.className.indexOf("an-slide-li") != -1) { objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //放开手时，判断objX最终值，如果大于按钮中间值，则使按钮恢复隐藏状态；反之； if (objX > -(sildeWidth / 4)) { obj.style.WebkitTransform = "translateX(" + 0 + "rem)"; objX = 0; xThink = '1'; window.sessionStorage.setItem("xThink", xThink); window.sessionStorage.setItem("anObjX", objX); //yesClick = true; } else { obj.style.WebkitTransform = "translateX(" + -sildeWidth + "rem)"; objX = -sildeWidth; window.sessionStorage.setItem("anObjX", objX); yesClick = false; //禁止点击li事件 xThink = '0'; window.sessionStorage.setItem("xThink", xThink); } } sildeWidth = 0; //点击li后需要执行的方法 if (event.target.className === "an-z-index-up" && yesClick) { // scope.goClick(); window.sessionStorage.setItem("anObjX", '0'); } }}
3.style / css
* { padding:0; margin:0; list-style:none;}body { background:#FFFFF0;}header { width:100%; background:#00CED1; border-bottom:1px solid #ccc; position:fixed; top:0; left:0; z-index:1;}header h2 { text-align:center; line-height:4rem; font-size:16px; color:#fff}.list { padding-top:4.1rem;}.list-ul { top:5px; overflow:hidden;}.list-li { height:3.8rem; /*width:100%; */line-height:3.8rem; border-bottom:1px solid #dcd6d6; position:relative; padding:0 8px; color:#666; background:#FFFFF0; -webkit-transform:translateX(0px); transition:transform 0.2s; -webkit-transition:transform 0.2s; /*3d加速*/webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}.z-index-up { z-index:9999; width:100%; height:3.8rem; padding:0; position:absolute; /* background:red; */}/* 头像 */.list-li .list-img { float:left; width:15%; padding-top:.49rem;}.list-li .list-img div { width:2.8rem; height:2.8rem; padding-left:.2rem; /*background:url("../img/Tulips.jpg") no-repeat center; *//*border:0; *//*border-radius:50%; */}.list-li .list-img div img { width:2.8rem; height:2.8rem; border-radius:50%;}/* 文字内容 */.list-li .list-contant { float:left; width:65%; padding-top:0.25rem; padding-left:.4rem;}.list-li .list-contant .list-contant-title { height:1.7rem; line-height:2rem;}.list-li .list-contant .list-contant-title label { font-size:14px; font-weight:bold;}.list-li .list-contant .list-contant-text { height:1.7rem; line-height:1.3rem;}.list-li .list-contant .list-contant-text label { font-size:12px;}/* 时间 消息提醒 */.list-time-message { float:left; width:16%; padding-top:0.25rem; padding-left:.46rem;}.list-time-message .list-time { float:left; height:1.7rem; width:100%; line-height:1.7rem; font-size:10px; text-align:right;}.list-time-message .list-time span { padding-right:.8rem;}.list-time-message .list-message { float:left; /* height:1.7rem; line-height:1.7rem; */}/* 按钮 */.btn { position:absolute; top:0; right:-80px; text-align:center; background:#FF0000; border-bottom:1px solid #FF0000; color:#fff; width:80px; height:3.8rem; line-height:3.8rem;}.btn div { /*padding-right:.6rem; */}/* 提示框 */.contant-prompt { width:100%; text-align:center; z-index:1; opacity:0.9; display:none;}.contant-prompt .prompt { position:absolute; bottom:0; left:0; right:0; height:2rem; text-align:center; font-size:12px; line-height:2rem; background:#777171; /* border-radius:8%; */}.contant-prompt .prompt div { color:#fff; font-weight:700; padding-left:.3rem; padding-right:.3rem;}
最后，欢迎IT同事好友朋友们，互相指教，进步！