首页 > 代码库 > js高仿QQ消息列表左滑功能
js高仿QQ消息列表左滑功能
该组件，主要功能类似于QQ消息列表左滑出现删除、标为已读等按钮的功能；现在的版本用的是纯javaScript编写；后续会跟进 angularJs 开发的类似组件以及jquery的;
下面，就让我们来认识下怎么使用该程序；
在该程序里，总共分为四个文件：
1 .css文件夹
2. img 图片文件夹
3. js文件
4. index.html 主页面；
稍后，你可以自行下载，打开运行观看效果；
二、代码讲解
1.此html结构，为不可修改结构
<ul class="list-ul">
<!--an-slide-li 此样式必须添加在li标签上，为js程序判断是否选中的是要操作的dom元素所用-->
<li class="list-li an-slide-li">
<!--z-index-up(z-index:层级最高，且覆盖整个li):对应的dom元素，是为了在触发touchStart事件事，可以选中整个li-->
<div class="z-index-up" onClick="change(‘新浪博客‘)"></div>
<div>
<div class="list-img">
<div>
<img src="http://www.mamicode.com/img/Tulips.jpg" />
</div>
</div>
<div class="list-contant">
<div class="list-contant-title"><label>微博已开通</label></div>
<div class="list-contant-text"><label>第一个，我要发博客</label></div>
</div>
<div class="list-time-message">
<div class="list-time"><span>10:18</span></div>
<div class="list-message"></div>
</div>
</div>
<div class="btn" onClick="del(‘1‘)">
<div>
删除
</div>
</div>
</li>
</ul>
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同事好友朋友们，互相指教，进步！
js高仿QQ消息列表左滑功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。