前言

提示：这里可以添加本文要记录的大概内容：

提示：以下是本篇文章正文内容，下面案例可供参考

一、基于vue transform: translateY 上下滑动实现？

javaScript -- touch事件详解（touchstart、touchmove和touchend）

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

二、使用步骤

1.引入库

代码如下（示例）：

<div class="roll" id="category3"><ul class="header_nav_new" style="transform: translateY(0px);"id="box"ref="dragBox"@touchstart="touchstartHandle('dragBox',$event)"@touchmove="touchmoveHandle('dragBox',$event)"@touchend="toucendveHandle('dragBox',$event)"><li><a class="J_ping" >111</a></li></ul>
</div>methods: {tz(){const toast = Toast.loading({duration: 0, // 持续展示 toastforbidClick: true,message: '',loadingType: 'spinner',});let second = 1;const timer = setInterval(() => {second--;if (second) {toast.message = ``;} else {clearInterval(timer);// 手动清除 ToastToast.clear();this.$router.push('/camera')}}, 500);},onSearch(val) {Toast(val);},//开始拖动touchstartHandle(refName, e) {let element = e.targetTouches[0]// 记录点击的坐标this.coordinate.client = {x: element.clientX,y: element.clientY}// 记录需要移动的元素坐标this.coordinate.elePosition.left = this.$refs[refName].offsetLeftthis.coordinate.elePosition.top = this.$refs[refName].offsetTop},//正在拖动touchmoveHandle(refName, e) {let element = e.targetTouches[0]// 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)let divHg1 = document.getElementById("category3").clientHeight;let divHg = divHg1*1/3;// 限制可移动距离，不超出可视区域y = y >=0  ? 0 : y <= '-'+divHg  ? '-'+divHg  : y// 移动当前元素let ScaleNum = y + 'px'this.$refs[refName].style.transform = `translateY(${ScaleNum})`},//结束拖动toucendveHandle(refName, e){// let element = e.targetTouches[0]let element=document.defaultView.getComputedStyle(document.getElementById('box'),null).transform;let tanslateY = parseFloat(element.substring(6).split(',')[5]);let divHg = document.getElementById("box").clientHeight*1/3;if(tanslateY>0){let divHg = document.getElementById("box");let ScaleNum =0this.$refs[refName].style.transform = `translateY(${ScaleNum})`}if(tanslateY<divHg){let divHg = document.getElementById("box");let ScaleNum =0this.$refs[refName].style.transform = `translateY(${ScaleNum})`}},
},

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单基于vue transform: translateY 上下滑动实现的方法

基于vue transform: translateY 上下滑动实现相关推荐

基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
原生JS实现移动端模块的左右滑动切换效果，基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
vue实现卡片式上下滑动_基于Vue.js仿制探探卡片左右滑动特效
说明 > 最近一直在捣鼓Nuxt.js项目,项目中有个需求是实现类似探探左右滑动切换功能.要求能实现手指拖拽切换.点击按钮进行切换.拖拽回弹等功能. 如上图:最终展示效果 emmm~~ 是不是感 ...
【原创】基于vue。简单、优雅的评论插件（包含颜文字表情、滑动验证）。
主要功能支持颜文字emoji表情(╮(￣▽￣)╭) 支持滑动验证. 评论为空不允许提交. 封装了几个常用的方法. 在线浏览 1.用户已登录 2.用户未登录使用方法 <template> ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
js时间选择器_Vuestic Admin一款免费与美妙基于Vue.js开发的管理模板
Vuestic Admin 简介 vuestic admin是一款流行,免费与美妙的基于Vue.js开发出来的管理模板,包括38以上个定制用户界面组件,由Epicmax开发,由Vasili Savit ...
实现一个基于Vue的Button小组件
概述原生HTML的button只能保证功能存在,样式都不怎么好看.当然也可以通过编写css样式来改变原生HTML中的button显示,但是现在各个UI框架都很流行,也很方便,很多时候都是直接引入框架 ...
基于VUE的SVG动画处理（一）
基于VUE的SVG动画处理(一) 提示:涉及vue.photoshop.svg动画一.创建SVG文件方法一:使用photoshop绘制所需接线图,导出svg格式. 第一种:快速导出SVG编辑-&g ...
基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
D3.js树图tree 组织机构分布图(基于vue)
@[TOC](D3.js树图tree 组织机构分布图(基于vue)) 背景前段时间接到一个需求,仿照企业查查->企业族谱使用d3画出企业关系树图.这也是本人第一次接触d3.js,总体来说就是 ...

基于vue transform: translateY 上下滑动实现

文章目录

前言

一、基于vue transform: translateY 上下滑动实现？

javaScript -- touch事件详解（touchstart、touchmove和touchend）

二、使用步骤

1.引入库

总结

基于vue transform: translateY 上下滑动实现相关推荐

最新文章

热门文章