博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue自定义事件之左滑出现删除按钮
阅读量:5144 次
发布时间:2019-06-13

本文共 1296 字,大约阅读时间需要 4 分钟。

思路:   1.页面布局   2.使用CSS来完成滑动特效   3.监控鼠标距离浏览器左侧的距离,滑动值达到一定范围后增加class -- swipeleft,只能左滑不能右滑   4.每次点击的时候要判断当前元素的删除按钮是否已经出现,如果是出现,再次点击当前元素或者是滑动其他元素的时候要关闭显示删除按钮的元素
*{margin:0;padding:0;} body{font-size:.14rem;} li{list-style:none;} i{font-style:normal;} a{color:#393939;text-decoration:none;} .list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;} .list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;} .list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;} .list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;} .swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
var touchList=[     {title:"侧滑按钮1",delBtn:false},     {title:"侧滑按钮2",delBtn:false},     {title:"侧滑按钮3",delBtn:false} ];
//自定义事件之长按删除 Vue.directive('vuetouch', function (el,binding) {
var elIndex=binding.value.index; //侧滑显示删除按钮 var container = el; var x=0; var XX=0; container.addEventListener('touchstart', function(event) {
x = event.changedTouches[0].pageX; for(var i=0;i

转载于:https://www.cnblogs.com/qiuchuanji/p/7883935.html

你可能感兴趣的文章
Oracle中包的创建
查看>>
django高级应用(分页功能)
查看>>
【转】Linux之printf命令
查看>>
关于PHP会话:session和cookie
查看>>
C#double转化成字符串 保留小数位数, 不以科学计数法的形式出现。
查看>>
利用IP地址查询接口来查询IP归属地
查看>>
构造者模式
查看>>
Hbuild在线云ios打包失败,提示BuildConfigure Failed 31013 App Store 图标 未找到 解决方法...
查看>>
找到树中指定id的所有父节点
查看>>
jQuery on(),live(),trigger()
查看>>
treegrid.bootstrap使用说明
查看>>
[Docker]Docker拉取,上传镜像到Harbor仓库
查看>>
javascript 浏览器类型检测
查看>>
记录:Android中StackOverflow的问题
查看>>
导航,头部,CSS基础
查看>>
[草稿]挂载新硬盘
查看>>
[USACO 2017 Feb Gold] Tutorial
查看>>
关于mysql中GROUP_CONCAT函数的使用
查看>>
OD使用教程20 - 调试篇20
查看>>
gzip
查看>>