vue仿ios列表左划删除
时间:2019-09-26
本文章向大家介绍vue仿ios列表左划删除,主要包括vue仿ios列表左划删除使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了vue仿ios列表左划删除的具体代码,供大家参考,具体内容如下
效果:
代码:
<template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider" > <!-- 插槽中放具体项目中需要内容 --> <slot></slot> </div> <div class="remove" ref='remove'> 删除 </div> </div> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { startX:0, //触摸位置 endX:0, //结束位置 moveX: 0, //滑动时的位置 disX: 0, //移动距离 deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider" } }, methods:{ touchStart(ev){ ev= ev || event //tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕 if(ev.touches.length == 1){ // 记录开始位置 this.startX = ev.touches[0].clientX; } }, touchMove(ev){ ev = ev || event; //获取删除按钮的宽度,此宽度为滑块左滑的最大距离 let wd=this.$refs.remove.offsetWidth; if(ev.touches.length == 1) { // 滑动时距离浏览器左侧实时距离 this.moveX = ev.touches[0].clientX //起始位置减去 实时的滑动的距离,得到手指实时偏移距离 this.disX = this.startX - this.moveX; console.log(this.disX) // 如果是向右滑动或者不滑动,不改变滑块的位置 if(this.disX < 0 || this.disX == 0) { this.deleteSlider = "transform:translateX(0px)"; // 大于0,表示左滑了,此时滑块开始滑动 }else if (this.disX > 0) { //具体滑动距离我取的是 手指偏移距离*5。 this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)"; // 最大也只能等于删除按钮宽度 if (this.disX*5 >=wd) { this.deleteSlider = "transform:translateX(-" +wd+ "px)"; } } } }, touchEnd(ev){ ev = ev || event; let wd=this.$refs.remove.offsetWidth; if (ev.changedTouches.length == 1) { let endX = ev.changedTouches[0].clientX; this.disX = this.startX - endX; console.log(this.disX) //如果距离小于删除按钮一半,强行回到起点 if ((this.disX*5) < (wd/2)) { this.deleteSlider = "transform:translateX(0px)"; }else{ //大于一半 滑动到最大值 this.deleteSlider = "transform:translateX(-"+wd+ "px)"; } } } } } </script> <style scoped lang="less"> .slider{ width: 100%; height:100px; position: relative; user-select: none; .content{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background:green; z-index: 100; // 设置过渡动画 transition: 0.3s; } .remove{ position: absolute; width:200px; height:100px; background:red; right: 0; top: 0; color:#fff; text-align: center; font-size: 40px; line-height: 100px; } } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Dart 中的生产模式和检查模式
- 使用mysqladmin工具统计mysql当前的T/QPS
- MixIn 理解
- Day14:链表中倒数第k个结点
- Flutter开发笔记——BottomNavigationBar设置未选择Item颜色
- 访问虚拟机局域网服务拒绝连接
- uninstalling vim-minimal 同时也卸载了 sudo 解决方法
- 大点干!早点散----------深入剖析缓存加速--squid(反向代理与ACL访问控制以及sarg日志)
- JVM的Xms和Xmx参数设置为相同值有什么好处?
- 【CVPR 2020】一种新的门控通道注意力转换单元
- 5个好用的 CSS 函数
- java1.8中Object类源码分析
- 多线程基础(六):Object的wait方法以及notify与notifyAll的区别
- Day15:反转链表
- Day16:合并两个排序的链表