百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

移动端左滑出现删除按钮 移动端左滑出现删除按钮

bigegpt 2024-10-12 06:28 3 浏览

目录：在我们日常的开发过程中应该都会遇到这样的要求；《一个商品盒子在左滑以后出现删除按钮》；最开始我是在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的简单思路；可能在表达上不是很好；但是我相信大家去写一个一下就明白了；

记录自己；记录生活；记录明天

相关推荐

Go语言泛型-泛型约束与实践（go1.7泛型）

来源：械说在Go语言中，Go泛型-泛型约束与实践部分主要探讨如何定义和使用泛型约束（Constraints），以及如何在实际开发中利用泛型进行更灵活的编程。以下是详细内容：一、什么是泛型约束？**泛型...

golang总结（golang实战教程）

基础部分Go语言有哪些优势？1简单易学：语法简洁，减少了代码的冗余。高效并发：内置强大的goroutine和channel，使并发编程更加高效且易于管理。内存管理：拥有自动垃圾回收机制，减少内...

Go 官宣:新版 Protobuf API（go pro版本）

原文作者：JoeTsai,DamienNeil和HerbieOng原文链接：https://blog.golang.org/a-new-go-api-for-protocol-buffer...

Golang开发的一些注意事项(一)（golang入门项目）

1.channel关闭后读的问题当channel关闭之后再去读取它，虽然不会引发panic，但会直接得到零值，而且ok的值为false。packagemainimport"...

golang 托盘菜单应用及打开系统默认浏览器

之前看到一个应用，用go语言编写，说是某某程序的windows图形化客户端，体验一下发现只是一个托盘，然后托盘菜单的控制面板功能直接打开本地浏览器访问程序启动的webserver网页完成gui相关功...

golang标准库每日一库之 io/ioutil

一、核心函数概览函数作用描述替代方案（Go1.16+）ioutil.ReadFile(filename)一次性读取整个文件内容（返回[]byte）os.ReadFileioutil.WriteFi...

文件类型更改器——GoLang 中的 CLI 工具

我是如何为一项琐碎的工作任务创建一个简单的工具的，你也可以上周我开始玩GoLang，它是一种由Google制作的类C编译语言，非常轻量和快速，事实上它经常在Techempower的基准测...

Go (Golang) 中的 Channels 简介（golang channel长度和容量）

这篇文章重点介绍Channels(通道)在Go中的工作方式，以及如何在代码中使用它们。在Go中，Channels是一种编程结构，它允许我们在代码的不同部分之间移动数据，通常来自不同的goro...

Golang引入泛型:Go将Interface「」替换为“Any”

现在Go将拥有泛型：Go将Interface{}替换为“Any”，这是一个类型别名：typeany=interface{}这会引入了泛型作好准备，实际上，带有泛型的Go1.18Beta...

一文带你看懂Golang最新特性（golang2.0特性）

作者：腾讯PCG代码委员会经过十余年的迭代，Go语言逐渐成为云计算时代主流的编程语言。下到云计算基础设施，上到微服务，越来越多的流行产品使用Go语言编写。可见其影响力已经非常强大。一、Go语言发展历史...

Go 每日一库之 java 转 go 遇到 Apollo?让 agollo 来平滑迁移

以下文章来源于GoOfficialBlog，作者GoOfficialBlogIntroductionagollo是Apollo的Golang客户端Apollo（阿波罗）是携程框架部门研...

Golang使用grpc详解（golang gcc）

gRPC是Google开源的一种高性能、跨语言的远程过程调用（RPC）框架，它使用ProtocolBuffers作为序列化工具，支持多种编程语言，如C++,Java,Python,Go等。gR...

Etcd服务注册与发现封装实现--golang

服务注册register.gopackageregisterimport("fmt""time"etcd3"github.com/cor...

Golang:将日志以Json格式输出到Kafka

在上一篇文章中我实现了一个支持Debug、Info、Error等多个级别的日志库，并将日志写到了磁盘文件中，代码比较简单，适合练手。有兴趣的可以通过这个链接前往：https://github.com/...

如何从 PHP 过渡到 Golang?（php转golang）

我是PHP开发者，转Go两个月了吧，记录一下使用Golang怎么一步步开发新项目。本着有坑填坑，有错改错的宗旨，从零开始，开始学习。因为我司没有专门的Golang大牛，所以我也只能一步步自己去...

一周热门
最近发表
标签列表