基于射流研究…实现移动端向左滑动出现删除按钮功能

最近在做移动端项目时，需要实现一个列表页面的每一项项目向左滑动时出现相应的删除按钮，本来想着直接使用泽普托的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的泽普托和touch.js，都没有用，也不知为什么？所以就弃用了这个插件。

下面是我后来实现后的代码，其实就是用了原生射流研究…的触控事件，再结合触摸点的坐标来判断左滑和右滑，

！DOCTYPE html html hearteta charset=' UTF-8 '元名称='视口'内容='宽度=设备宽度，初始比例=1.0,最大比例=1.0,用户可缩放=无titlejs侧滑显示删除按钮/title style * { margin 33600；划水：0;} body { font-size :14 rem}李{列表式：无；} I {字体样式：正常；} a { color: # 393939文本装饰：无；}.list { overflow : hidden margin-top :2 rem；左填充：3雷姆；边框-top:1px实心# ddd}。列出li { overflow:hidden宽度：120%;边框-底部：1px实心# ddd}。列出阿利{显示：块高度：88雷姆；线高：88雷姆；-网络套件-transit :所有0.3s线性；transition:all 0.3s线性；}.列表我明白了宽度：15%;文本对齐：居中；背景技术# E2421Bcolor: # fff}。swipeleft { transform : translatex(-15%)；-web套件-transform : translatex(-15%)；}/stylescript//计算根节点超文本标记语言的字体大小函数resizeRoot(){ var deviceWidth=document。文档元素。客户端宽度，num=750，num 1=num/100；if(deviceWidth num){ deviceWidth=num；}文档。文档元素。风格。font size=deviceWidth/num 1 ' px '；}//根节点超文本标记语言的字体大小初始化resizeRoot()；窗户。onresize=function(){ resizeRoot()；};/script/headsdysectiondiv class=' list ' ul lia href=' # ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow '侧滑显示删除按钮1i删除/I/a/Li lia href=' # ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '侧滑显示删除按钮2i删除/I/a/Li lia href=' # ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '侧滑显示删除按钮3i删除/i/a/li /ul/divscript//侧滑显示删除按钮定义变量展开=null/是否存在展开的利斯特瓦尔容器=document.querySelectorAll(' .列出阿利');for(var I=0；一。集装箱。长度；i ){ var x，Y，X，Y，swipeX，swipeY容器[i].addEventListener('touchstart '，函数（事件){ x=event.changedTouches[0].pageXy=event.changedTouches[0]。佩吉；swipeX=真；swipeY=trueif(扩展){ //判断是否展开，如果展开则收起扩展。类名=' '；} });容器[i].addEventListener('touchmove '，函数（事件){ X=event.changedTouches[0].pageXY=event.changedTouches[0]。佩吉；//左右滑动if(swipeX数学。ABS(X-X)-数学。ABS(Y-Y)0){//阻止事件冒泡事件。stopperpagation()；if(X - x 10){ //右滑事件。prevent default()；this.className=//右滑收起} if(x - X 10){ //左滑事件。prevent default()；this . NAmE=' swipeleft//左滑展开膨胀=这个；} swipeY=false} //上下滑动if(swipeY数学。ABS(X-X)-数学。ABS(Y-Y)0){ swipeX=false；} });}/脚本/正文/html也许大家也注意到了，在页面最开始部分加入了原生射流研究…对移动端自适应的实现，主要为了方便移动端页面在不同尺寸屏幕上的更好的展现，也是为了在误差很小的情况下能更好的将设计稿近乎完美的呈现在不同尺寸的屏幕上，主要使用到的单位是雷姆。

移动端自适应射流研究…

Script//计算根节点的字体大小HTML函数resize root(){ var device width=document . document element . client width，num=750，num 1=num/100；if(deviceWidth num){ deviceWidth=num；} document . document element . style . font size=deviceWidth/num 1 ' px '；}//用根节点HTML的字体大小初始化resizeRoot()；window . onresize=function(){ resizeRoot()；};其实/script的原理很简单，就是根据不同的屏幕计算根节点html的字体大小，然后利用rem相对于根节点html字体大小计算的原理实现不同元素的大小和间距。

也有人说其实可以用css3的响应风格@media screen来代替js。其实我觉得各种尺寸的安卓屏幕这么活跃，@media screen有点力不从心。

效果图如下：

附上源代码下载：

js_del_button(jb51.net)。rar

以上是基于边肖介绍的JS，移动终端向左滑动时删除按钮的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！