最近在做移动端项目时,需要实现一个列表页面的每一项条目向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有。上网查资料,又下载了最新版本的zepto和联系。js,都没有用,也不知为什么?所以就弃用了这个插件。
下面是我后来实现后的代码,其实就是用了原生js的触摸事件,再结合触摸点的坐标来判断左滑和右滑,
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,最大范围=1.0,user-scalable=不”比;
& lt; title> js侧滑显示删除按钮& lt;/title>
& lt; style>
*{保证金:0;填充:0;}
身体{字体大小:.14rem;}
李{list-style:没有;}
我{字体样式:正常;}
{颜色:# 393939;文字修饰:没有;}
.list{溢出:隐藏;margin-top: .2rem; padding-left: .3rem; border-top: 1 px固体# ddd;}
李.list{溢出:隐藏;宽度:120%;边界底部:1 px固体# ddd;}
李.list{显示:块;高度:.88rem;行高:.88rem; -webkit-transition:所有0.3 s线性;转型:所有0.3 s线性;}
.list李我{浮动:没错,宽度:15%;text-align:中心;背景:# E2421B;颜色:# fff;}
.swipeleft{变换:translateX (-15%); -webkit-transform: translateX (-15%);}
& lt;/style>
& lt; script>//计算根节点HTML的字体大小
函数resizeRoot () {
var deviceWidth=document.documentElement.clientWidth,
num=750,
num1=num/100;
如果(deviceWidth比;num) {
deviceWidth=num;
}
document.documentElement.style。字形大?deviceWidth/num1 +“px”;
}//根节点HTML的字体大小初始化
resizeRoot ();
窗口。onresize=function () {
resizeRoot ();
};
& lt;/script>
& lt;/head>
& lt; body>
& lt; section>
& lt; div类=傲斜怼北?
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在侧滑显示删除按钮1 & lt; i>删除& lt;/i> & lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在侧滑显示删除按钮2 & lt; i>删除& lt;/i> & lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在侧滑显示删除按钮3 & lt; i>删除& lt;/i> & lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; script>//侧滑显示删除按钮
var扩张=零;//是否存在展开的列表
var=document.querySelectorAll(容器”。列表li ');
(var=0;我& lt;container.length;我+ +){
变量x, y, x, y, swipeX, swipeY;
容器[我]。addEventListener (touchstart,函数(事件){
x=event.changedTouches [0] .pageX;
y=event.changedTouches [0] .pageY;
swipeX=true;
swipeY=true;
如果(扩张){//判断是否展开,如果展开则收起
扩张。className=" ";
}
});
容器[我]。addEventListener (touchmove,函数(事件){
X=event.changedTouches [0] .pageX;
Y=event.changedTouches [0] .pageY;//左右滑动
如果(swipeX,,数学。abs (X - X) -数学。abs (Y - Y)比;0){//阻止事件冒泡
event.stopPropagation ();
如果(X - X比;10){//右滑
事件。防止发生（）：
这一点。className=" ";//右滑收起
}
如果(x - x比;10){//左滑
事件。防止发生（）：
这一点。className=" swipeleft”;//左滑展开
扩张=;
}
swipeY=false;
}//上下滑动
如果(swipeY,,数学。abs (X - X) -数学。abs (Y - Y) & lt;0){
swipeX=false;
}
});
}
& lt;/script>
& lt;/body>
& lt;/html>
也许大家也注意到了,在页面最开始部分加入了原生js对移动端自适应的实现,主要为了方便移动端页面在不同尺寸屏幕上的更好的展现,也是为了在误差很小的情况下能更好的将设计稿近乎完美的呈现在不同尺寸的屏幕上,主要使用到的单位是快速眼动。
<强>移动端自适应js
& lt; script>//计算根节点HTML的字体大小
函数resizeRoot () {
var deviceWidth=document.documentElement.clientWidth,
num=750,
num1=num/100;
如果(deviceWidth比;num) {
deviceWidth=num;
}
document.documentElement.style。字形大?deviceWidth/num1 +“px”;
}//根节点HTML的字体大小初始化
resizeRoot ();
窗口。onresize=function () {
resizeRoot ();
};
& lt;/script>
