vue 仿iphone右滑解锁效果

非原创，找的大神的神作，根据自己的需求改的。想要的效果出来了，但是有些代码没看太明白。。。。还得学习。

原文链接： https://blog.csdn.net/qq_32109661/article/details/87795632

效果图

点击锁头按钮弹出下面的遮罩，仿iphone的解锁效果。

scss


// 锁屏遮罩按钮,样式不全，根据自己的需求来写，这是不是重点
.lock-box {position: absolute;top: 0;right: 30px;background: rgba(0,0,0,.2);width: 80px;height: 80px;border-radius: 100%;border: 1.4px solid #3e414e;.lock-btn {width: 40px;height: 40px;}}
/*遮罩*/.lock-mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,.5);z-index: 99;overflow: hidden;}/*锁 背景*/.main{position: fixed;bottom: 0;left: 0;right: 0;margin: 150px auto;width: 585px;height: 112px;background: #12141c;border-radius: 100px;border: 1.2px solid #3e414e;display: flex;justify-content: center;align-items: center;font-size: 32px;color: #636a85;// 重点在这里，按钮文字动画 startp {text-align: center;background-image: -webkit-linear-gradient(left, #3e414e, #747c9e 25%, #3e414e 50%, #747c9e 75%, #3e414e);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: animate 1s infinite linear;}/* 兼容写法，要放在@keyframes前面 */@-webkit-keyframes animate {0%{ background-position: 0 0;}100% { background-position: -100% 0;}}@keyframes animate {0%{ background-position: 0 0;}100% { background-position: -100% 0;}}// 重点在这里，按钮文字动画 end// 弹框锁头拖动按钮.drag_area{width: 116px;height: 116px;border-radius: 100%;background-image:linear-gradient(to top, #44495b, #c4cbe7);position: absolute;top: 0;left: 0;transition: all ease-out .2s;-webkit-overflow-scrolling:touch;img {width: 40px;height: 40px;}}}

html

<!--锁屏遮罩按钮-->
<dvi  class='lock-box flex_center' @click="openLockMask"><img  class='lock-btn'  src='换成你的icon图片链接地址'>
</dvi><!--锁屏 弹框-->
<div class="lock-mask" v-if="lockMask">
<!--锁屏动画--><div class="main" style="width: 294px;height: 57px;"><p>向右滑动解锁</p><div ref="move_div" style="width: 58px;height: 58px;" @touchstart="down" @touchmove="move" @touchend="end" :style="{top: bottom  + 'px', left: left  + 'px'}" class="drag_area flex_center"><img  class=''  src='../../../assets/icons/lockac.png'></div></div>
</div>

data

return {// 锁屏遮罩
lockMask:false,
flags: false,
position: {x: 0, y: 0, left: 0, top: 0},
top: 0,
left: 0,
bottom:0,
width:472,
}
methods: {// 锁屏遮罩点击事件openLockMask:function() {this.lockMask = true;},// 锁屏动画down () { // 拖动开始的操作this.flags = trueconst refs = this.$refs.move_div.getBoundingClientRect()let touch = eventif (event.touches) {touch = event.touches[0]}this.position.x = touch.clientXthis.position.y = touch.clientYthis.position.left = refs.leftthis.position.top = refs.top},move () { // 拖动中的操作if (this.flags) {let touch = eventif (event.touches) {touch = event.touches[0]}// debuggerconst xPum = this.position.left + touch.clientX - this.position.xconst yPum = this.position.top + touch.clientY - this.position.ythis.left = xPumthis.top = yPumthis.banOut()// 阻止页面的滑动默认事件// document.addEventListener('touchmove', function () {//   event.preventDefault()// }, {passive: false})}},end () { // 拖动结束的操作this.flags = falsethis.banOut();if(this.left >= 230) {this.lockMask = false}this.left = 0;},banOut () { // 避免拖动出界的限制const refs = this.$refs.move_div.getBoundingClientRect()if (this.left < 0) {this.left = 0} else if (this.left > this.width - 236) {this.left = this.width - 236}if (this.top < 0) {this.top = 0} else if (this.top > this.height - refs.height) {this.top = this.height - refs.height}},
}

vue 仿iphone右滑解锁效果相关推荐

android右滑返回动画,Android仿微信右滑返回功能的实例代码
先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的), 这些可以实现onTouchEvent来实现. ...
RecyclerView实现条目拖拽，左滑、右滑移除效果
对于android开发者来说RecyclerView应该已经很熟悉了,项目中基本都是使用RecyclerView来实现列表效果,这里要实现的是RecyclerView的条目拖拽.左滑.右滑移除效果,这 ...
android 左滑右滑,Android仿滴答清单左滑右滑效果
直接上效果图记录仿写滴答清单App 过程中的技术点本文分为以下章节,读者可按需阅读: 1.自定义RecycleItemTouchHelper 2.实现滴答清单左滑右滑效果 3.RecycleVie ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
仿Android美团打车司机端右滑接单效果
当前项目需要使用该效果,但是网上能找到的大多是封装好的RecyclerView的item. 本文参考 https://blog.csdn.net/lilu_leo/article/details ...
uni-app、H5+ 仿IOS 实现安卓手势拖拽右滑关闭当前页面并返回上级页面 + 阴影效果（侧滑返回）
背景在我们日常开发中,经常会效仿某些流行APP渲染动画效果,用来满足自己开发或公司开发的日常需要,学习一下新的东西还是好的,本案例是仿IOS 手势拖拽右滑关闭当前页面并返回主页的一个案例预览效 ...
Vue实现仿iPhone悬浮球
Vue实现仿iPhone悬浮球悬浮球插件简单的效果图: 很遗憾,没找到太好的视频转gif的软件,压缩出来的大小超过了限制,就不放图了可以参考其他人的图,效果一致: 简单实用案例: <!-- ...
android 自定义滑动删除,Android_Android ListView实现仿iPhone实现左滑删除按钮的简单实例，需要自定义ListView。这里就交Fl - phpStudy...
Android ListView实现仿iPhone实现左滑删除按钮的简单实例需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Ov ...
仿抖音右滑清屏，左滑列表功能
概述项目中要实现仿抖音直播间滑动清屏,侧滑列表的功能,在此记录下实现过程和踩坑记录希望避免大家走些弯路,也当作自己的一个总结首先看下Demo中的效果阅读文章需要提前熟悉些事件分发的内 ...

vue 仿iphone右滑解锁效果

vue 仿iphone右滑解锁效果相关推荐

最新文章

热门文章