Vu+element实现

<template>
<div class="">
<div class="slider">
<div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider">
<!-- 插槽中放具体项目中需要内容 -->
<slot></slot>
</div>
<div class="remove " ref='remove' style="display: inline">
<a><i class="el-icon-edit" style="size: 78px"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a><i class="el-icon-delete"> </i></a>
</div>
</div>
</div>
</template>
<style scoped lang="less" scoped>
.slider{
width: 100%;
height:100px;
position: relative;
user-select: none;
.content{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:wheat;
z-index: 100;
// 设置过渡动画
transition: 0.3s;
}
.remove{
position: absolute;
width:100px;
height:100px;
right: 0;
top: 0;
color:black;
text-align: center;
font-size: 10px;
line-height: 100px;
}
}
</style>
<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>

Vue滑动删除与修改的更多相关文章

  1. 干货--手把手撸vue移动UI框架: 滑动删除

    前言 前几天因为项目需要,用jquery写了一个swiperOut组件,然后我就随便把这个组件翻译成基于Vue的了,有兴趣的朋友可以看下.Github源码(不麻烦的话帮忙start,请各位大爷赏个星星 ...

  2. 写一个js向左滑动删除 交互特效的插件——Html5 touchmove

    需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...

  3. iOS UITableViewCell滑动删除

    一般我们使用列表的形式展现数据就会用到UITableView.在熟练掌握了用UITableView展示数据以后,开发过程中可能会遇到需要删除数据的需求,我们想实现在一行数据上划动一下,然后出现一个删除 ...

  4. android中listview的item滑动删除效果(已解决listview点击问题)

    领导看到iphone上tableview有个滑动删除的效果,要求在android上也实现,搜了下资料,实现起来比较简单,可弄到后面,居然不能点击了,把一篇文章中的代码修改了一下,捣鼓了一番,搞定,下面 ...

  5. [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

    转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...

  6. 自定义listView添加滑动删除功能

    今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...

  7. UITableViewCell滑动删除及移动

    实现Cell的滑动删除, 需要实现UITableView的代理UITableViewDelegate中如下方法: //先要设Cell可编辑 - (BOOL)tableView:(UITableView ...

  8. 自己开发的 vue 滑动按钮组件 vue-better-slider

    写在前面的 这个人第一次尝试开发并发布一个 vue 的组件,该组件实现了类似 ios 手机淘宝客户端 -> 消息界面中消息的滑动删除功能等,如下为该组件的文档. 一个 Vue 的滑动按钮组件,有 ...

  9. iOS边练边学--简单的数据操作(增、删、改),左滑动删除和弹窗

    一.数据刷新的原则: 通过修改模型数据,来修改tableView的展示 先修改数据模型 在调用数据刷新方法 不要直接修改cell上面子控件的属性 二.增删改用到的方法: <1>重新绑定屏幕 ...

随机推荐

  1. 外盘持仓盈亏何时推送---ITapTradeAPINotify::OnRtnPositionProfit

    易盛外盘提供了一个可以直接获取持仓盈亏的函数,这个比CTP方便多了 virtual void TAP_CDECL ITapTrade::ITapTradeAPINotify::OnRtnPositio ...

  2. 查看和修改 mysql库、表、字段编码

    查看编码 查看数据库编码. show variables like '%char%'; 查看表编码 show create table <表名>; 例:show create table ...

  3. HDFS基础

    1. HDFS Shell基础 [root@master hadoop]# hadoop fsUsage: hadoop fs [generic options] [-appendToFile < ...

  4. win8.1系统出现C0000034正在应用更新操作怎么办

    说来也奇怪,笔者Dell台式机前几天系统提示有更新,笔者对系统进行了更新,可昨天开机后,就出现了C0000034正在应用更新操作的情况,且电脑一直没反应,上网搜了一下帖子,发现复制粘贴的帖子好多,基本 ...

  5. 框架源码系列十二:Mybatis源码之手写Mybatis

    一.需求分析 1.Mybatis是什么? 一个半自动化的orm框架(Object Relation Mapping). 2.Mybatis完成什么工作? 在面向对象编程中,我们操作的都是对象,Myba ...

  6. Linux 文件普通权限_011

    一.文件权限10个字符对应类型和权限 二.Linux普通文件和Linux目录读.写.执行权限说明 标注:Linux 中的文件名是存在于父目录的block里面,并指向这个文件的inode节点 1.lin ...

  7. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

  8. 使用SMART监控Ubuntu

    参考:完全用 GNU/Linux 工作 - 29. 檢測硬碟 S.M.A.R.T. 健康狀態 1.安装 sudo apt-get install smartmontools 2.查看硬盘的参数,需要获 ...

  9. flume学习笔记——安装和使用

    Flume是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并写到各种数据接受方(可定制)的能力. Flume是一 ...

  10. iOS之HTTP和HTTPS的基本知识和应用

    HTTPS的基本使用 1.https简单说明HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道 ...