前端实现滑动解锁
前端 实现 解锁 滑动
2023-09-11 14:19:39 时间
上代码:
<template> <div> <div id="box"> <div class="bgColor"></div> <div class="txt" >滑动解锁</div> <!--给i标签添加上相应字体图标的类名即可--> <div class="slider"> <i v-show="!isSuccess" class="el-icon-d-arrow-right"></i> <i v-show="isSuccess" class="el-icon-check"></i> </div> </div> </div> </template> <script> export default { mounted(){ var self=this; //一、定义了一个获取元素的方法 function getEle(selector){ return document.querySelector(selector); } //二、获取到需要用到的DOM元素 var box = getEle("#box"),//容器 bgColor = getEle(".bgColor"),//背景色 txt = getEle(".txt"),//文本 slider = getEle(".slider"),//滑块 icon = getEle(".slider>i"), successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离 downX;//用于存放鼠标按下时的位置 //三、给滑块添加鼠标按下事件 slider.onmousedown = mousedownHandler; slider.ontouchstart = mousedownHandler;//移动端加touchstart事件 //3.1鼠标按下事件的方法实现 function mousedownHandler(e){ bgColor.style.transition = ""; slider.style.transition = ""; var e = e || window.event || e.which; downX = e.clientX ? e.clientX : e.changedTouches[0].clientX; if(!self.isSuccess){ //在鼠标按下时,分别给鼠标添加移动和松开事件 document.onmousemove = mousemoveHandler; document.onmouseup = mouseupHandler; //添加移动端对应事件 document.ontouchmove = mousemoveHandler; document.ontouchend = mouseupHandler; } }; //四、定义一个获取鼠标当前需要移动多少距离的方法 function getOffsetX(offset,min,max){ if(offset < min){ offset = min; }else if(offset > max){ offset = max; } return offset; } //3.1.1鼠标移动事件的方法实现 function mousemoveHandler(e){ var e = e || window.event || e.which; var moveX = e.clientX?e.clientX:e.changedTouches[0].clientX; console.log(moveX) var offsetX = getOffsetX(moveX - downX,0,successMoveDistance); bgColor.style.width = offsetX + "px"; slider.style.left = offsetX + "px"; if(offsetX == successMoveDistance){ success(); } //如果不设置滑块滑动时会出现问题(目前还不知道为什么) e.preventDefault(); }; //3.1.2鼠标松开事件的方法实现 function mouseupHandler(e){if(!self.isSuccess){ bgColor.style.width = 0 + "px"; slider.style.left = 0 + "px"; bgColor.style.transition = "width 0.5s linear"; slider.style.transition = "left 0.5s linear"; } document.onmousemove = null; document.onmouseup = null; //移除移动端事件 document.ontouchmove = null; document.ontouchend = null; }; //五、定义一个滑块解锁成功的方法 function success(){ self.isSuccess = true; txt.innerHTML = "解锁成功"; bgColor.style.backgroundColor ="lightgreen"; //滑动成功时,移除鼠标按下事件和鼠标移动事件 slider.onmousedown = null; document.onmousemove = null; //移除移动端事件 document.ontouchstart = null; document.ontouchmove = null; }; }, data(){ return { isSuccess:false } } } </script> <style> // 使用全局样式样式去掉 * { touch-action: pan-y; } #box{ position: relative; width:300px; height:40px; margin: 0 auto; margin-top: 10px; background-color: #e8e8e8; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); } .bgColor{ position: absolute; left:0; top:0; width:40px; height: 40px; background-color: lightblue; } .txt{ position: absolute; width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #000; text-align: center; } .slider{ position: absolute; left:0; top:0; width: 50px; height: 40px; // border: 1px solid #ccc; background: #fff; text-align: center; cursor: move; } .slider>i{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } </style>
以上代码适配移动端和pc端,
可以根据自己的需要添加到页面,可以用mixin混入的方式引入,可以将整个mounted中的方法封装在一个方法内,这样不会显的乱,看自己情况引入使用就行,
style中下面的样式,是放置整体拖动
// 使用全局样式样式去掉 * { touch-action: pan-y; }
相关文章
- [web前端] css3 transition属性实现3d动画效果
- [Web 前端] Jquery实现可直接编辑的表格
- 前端存储 - localStorage
- 聊聊与前端工程师天然互补的 Serverless
- Django中利用filter与simple_tag为前端自定义函数的实现方法
- 前端路由的前生今世及实现原理(转)
- 前端-bootstrap-长期维护
- 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示
- 加密–RSA前端与后台的加密&解密
- 前端学习 -- Css -- 字体的几个属性学习
- 前端学习 -- Css -- 伪元素
- js基于lodash实现前端防抖与节流
- Web前端面试真题(算法篇):003篇
- 前端面试及答案:css 选择器有哪些?权重是什么样的?
- 基于TS手写前端MVC框架简单实现购物车功能
- 五分钟带你零配置开始前端项目(Parcel)
- 观察学习:大公司的前端大小写命名规范
- vuejs项目前端实现在线预览表格xlsx文件,docx预览,word预览,excel预览,pdf预览
- DataScience&ML:风控场景之模型监控的意义、具体内容【线上线下一致性监控、前端监控(客群稳定性/风控决策全流程)、后端监控(模型性能评估/资产质量分析)、模型表现监控和模型影响】之详细攻略
- 〖大前端 - 基础入门三大核心之CSS篇⑭〗- CSS浮动
- 移动时代的前端加密
- 前端vue2.0实现复制链接,链接生成二维码图片,二维码图片下载
- 前端学习:javascript进阶
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 15分钟快速配置eslint,prettier,lint-staged,husky,commitizen实现前端项目代码规范化
- Spring MVC 学习总结(九)——Spring MVC实现RESTful与JSON(Spring MVC为前端提供服务)
- 从0到1实现自动化测试平台(六):前端环境搭建
- 你们公司的『前端项目』是如何做测试的?
- CoinHive挖矿原理分析——后端是nodejs服务,前端直接miner.start即可
- webstorm-前端javascript开发神器中文教程和技巧分享(转)
- Web前端 | HTML基本标签、实体符号、表格、超链接、列表
- Gartner:无需数据中台,API就能胜任连接前端和后端的工作