移动端左滑出现删除按钮

最新推荐文章于 2024-07-02 16:15:40 发布

雾恋

最新推荐文章于 2024-07-02 16:15:40 发布

阅读量1.2k

点赞数

分类专栏： js基础文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/weixin_50307964/article/details/117202265

版权

js基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

目录：在我们日常的开发过程中应该都会遇到这样的要求；《一个商品盒子在左滑以后出现删除按钮》；最开始我是在vant里面的组件中发现这个；但是针对公司的一些要求在布局上感觉不是那么好；后来去看了那些大佬写的文章以后感觉也不是那么难；如果今天在这儿写一个简单的dome；做一哈记录；也让大家相互学习学习；如果表达的不对的；希望大佬们多多提出意见；

首先先来一个效果图
在这里插入图片描述
移动端左滑出现删除按钮
这个我就不分步骤了；直接上代码；后面我再一一说说思路

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #2c3c4f
    }
    .box {
      position: relative;
      top: 200px;
      margin: 0 auto;
      font-size: 14px;
      width: 300px;
      height: 45px;
      overflow: hidden;
    }
    .boxItem {
      position: absolute;
      top: 0;
      left: 0;
      transition: all .5s;
      height: 45px;
      width: 340px;
      background-color: #32495d;
    }
    .left {
      float: left;
      text-align: center;
      width: 300px;
      height: 45px;
      line-height: 45px;
      background-color: #fff;

    }
    .right {
      float: right;
      color: #fff;
      width: 40px;
      text-align: center;
      height: 45px;
      line-height: 45px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="boxItem">
      <div class="left">左滑删除效果</div>
      <div class="right">删除</div>
    </div>
  </div>
</body>
<script>
  let pageXstart
  let pageYstart
  let boxItem = document.querySelector('.boxItem')
  let right = document.querySelector('.right')
  boxItem.ontouchstart = function ($event){
    let e = event
    pageXstart = e.touches[0].pageX
    pageYstart = e.touches[0].pageY
  }

  boxItem.ontouchmove = function ($event){
    let e = event
    let pageXmove = e.touches[0].pageX
    let pageYmove = e.touches[0].pageY
    // let x = Math.abs(pageXmove - pageXstart)
    // let y = Math.abs(pageYmove - pageYstart)
    let x = pageXstart - pageXmove
    let y = pageYstart - pageYmove
    if(x>right.scrollWidth){
      boxItem.style.left = -right.scrollWidth + 'px'
    }
    if(x<right.scrollWidth) {
      boxItem.style.left = 0 + 'px'
    }
    if(y>boxItem.scrollHeight) {
      boxItem.style.left = 0 + 'px'
    }
  }
</script>
</html>

第一：我们首先来想第一个问题；我们需要把一个删除按钮这个盒子隐藏掉；然后在我们滑动的时候，这个删除按钮盒子又得出现在我们的眼前怎么办？

这个时候我们就要这样想；我们需要把删除按钮显示出来；那么他的兄弟元素必然会隐藏一部分；所以我们需要移动的一定是删除按钮的父级；既然我们要移动的是父级（boxItem），那么父级（boxItem）一定是比它的父级（box）更宽的；所以就需要在box上出现 ** overflow: hidden; ** ；把多余的部分隐藏起来；然后根据定位（left）来移动距离；就达成滑动效果了
在这里插入图片描述

第二：基本样式做好以后；我们现在考虑的就是怎样让其滑动起来了

这儿的话先给大家说2个移动端的事件

ontouchmove  // 手指在屏幕上移动时触发；
ontouchstart // 手指按下时触发；

我们在知道这两个事件以后就简单了；大家这样想；当我们的手指触摸到屏幕的时候的位置是多少？然后我们在此过程移动的距离是多少？

打个比方哈：你想让用户移动了40的距离就出现删除按钮；当我们点击以后x轴的位置是100；然后你的手指在移动的过程中到了60的位置；那么这个时候你就让其left移动40出现删除按钮即可；如果想有动画效果做一个过渡就好了；其实原理就是这么简单

第三：如果我有多个商品盒子怎么办呢？

如果你有多个盒子的话；只需要用一个循环就行了；切记这个不要用var声明；如果用var的话会出现闭包问题；直接用let即可；如果你确实想用var的是；可以根据以下代码进行修改；这是原来做一个效果的代码：也就是在事件外增加一个立即执行函数即可

for(let i=0;i<li.length;i++){    !function(i){      
  li[i].onmouseover = function(){        
    	admin.style.left = i*80 + 'px'      
  		}    
		}(i)  
}

以上呢就是这个dome的简单思路；可能在表达上不是很好；但是我相信大家去写一个一下就明白了；
记录自己；记录生活；记录明天

雾恋

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端左滑出现删除按钮

目录：在我们日常的开发过程中应该都会遇到这样的要求；《一个商品盒子在左滑以后出现删除按钮》；最开始我是在vant里面的组件中发现这个；但是针对公司的一些要求在布局上感觉不是那么好；后来去看了那些大佬写的文章以后感觉也不是那么难；如果今天在这儿写一个简单的dome；做一哈记录；也让大家相互学习学习；如果表达的不对的；希望大佬们多多提出意见；首先先来一个效果图移动端左滑出现删除按钮这个我就不分步骤了；直接上代码；后面我再一一说说思路<!DOCTYPE html><html lang
复制链接

扫一扫

专栏目录