html5 向左滑动删除,基于JS实现移动端向左滑动出现删除按钮功能

最新推荐文章于 2022-01-29 16:48:14 发布

Pan Fan

最新推荐文章于 2022-01-29 16:48:14 发布

阅读量946

点赞数

文章标签： html5 向左滑动删除

本文介绍了如何使用原生JavaScript实现移动端列表项向左滑动显示删除按钮的功能，通过监听touchstart和touchmove事件，结合手指滑动距离判断左滑和右滑。同时，分享了移动端页面自适应的简单JS实现，通过调整根节点的font-size来适配不同尺寸的屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

js侧滑显示删除按钮

*{margin:0;padding:0;}

body{font-size:.14rem;}

li{list-style:none;}

i{font-style:normal;}

a{color:#393939;text-decoration:none;}

.list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}

.list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}

.list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}

.list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}