vue移动端实现左滑编辑与删除的全过程

vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,这篇文章主要给大家介绍了关于vue移动端实现左滑编辑与删除的相关资料,需要的朋友可以参考下

前言

根据项目需要使用 Vue-touch 实现了一个vue移动端的左滑编辑和删除功能,废话不多说,先看效果图,然后上代码吧!

方法如下:

第一步:安装   vue-touch 

npm install vue-touch@next --save

第二步:main.js 中引入

import VueTouch from 'vue-touch'; Vue.use(VueTouch, { name: 'v-touch' });

第三步:使用(用v-touch包住你要左滑删除的内容)

style 

我只贴出了上面代码的css样式,根据需求自行删减吧,有需要的留着,不需要的删除,需要改变的自行修改

.wrap { width: 100%; height: 100%; overflow: hidden; } .item { padding-left: 40px; height: 120px; background: #ffffff; align-items: center; flex-direction: inherit; .left-img { width: 120px; height: 100px; overflow: hidden; img { min-width: 120px; height: 100px; } } } .url { width: 400px; padding: 10px 30px 0; box-sizing: border-box; word-wrap: break-word; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .city { text-align: center; min-width: 100px; } .item-p { color: #333333; font-size: 22px; } .nothave { color: #999999; } .hint { height: 40px; align-items: center; margin-bottom: 30px; } .line { width: 250px; height: 1px; background: #999999; opacity: 0.5; } .item { width: 120%; // 超过100% transition: 0.1s ease 0s; // 过渡效果 } .edit-line { width: 2px; height: 80px; background: rgba(255, 255, 255, 1); } .edit-delete { width: 160px; height: 100%; background: rgba(255, 126, 34, 1); opacity: 0.8; align-items: center; } .edit, .ad-delete { img { width: 42px; height: 42px; } } .add-btn { width: 200px; height: 80px; background: rgba(255, 126, 34, 1); box-shadow: 0px 0px 5px 0px rgba(221, 221, 236, 1); border-radius: 40px; text-align: center; line-height: 80px; color: #ffffff; font-size: 30px; position: fixed; bottom: 8%; left: 50%; transform: translateX(-50%); }

总结

以上就是vue移动端实现左滑编辑与删除的全过程的详细内容,更多请关注www.12346.net其它相关文章!

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益 请一个月内联系我们,我们将配合处理!

原文地址:vue移动端实现左滑编辑与删除的全过程发布于2023-01-25 13:04:01