首页
学习
活动
专区
圈层
工具
发布

VUE开发一个组件——Vue list列表滑动删除

前言 滑动删除,在很多APP软件里面可以见到,比如淘宝的订单列表,QQ微信的聊天记录等等,今天就来看看JavaScript是如何实现这个功能的,之所以说是vue,主要是框架是vue啦,主要还是JS+CSS...页面部分 页面就超级简单咯,遍历一个列表,添加touchstart和touchend事件,并添加删除按钮。如果滑动就添加move类样式,向左滑动60px。...: 10px; } ul{ overflow-x: hidden; /*隐藏ul x轴的滚动条*/ } li.move { transform: translateX(-60px); /*滑动后x...: {}, // 记录开始滑动(x1),结束滑动(x2)的鼠标指针的位置 candelete: {}, // 滑动的item } } 事件部分 methods: { /**...,或者向某个位置添加数据 }, touchStart(item) { let touchs = event.changedTouches[0]; // 记录开始滑动的鼠标位置

1K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    删除文件后,磁盘空间没有释放的处理记录

    经查看发现有个文件过大(80G),于是在跟有关同事确认后rm -f果断删除该文件。但是发现删除该文件后,/分区的磁盘空间压根没有释放出来,使用率还是100%!这是为什么呢??...一个文件在文件系统中的存放分为两个部分:数据部分和指针部分,指针位于文件系统的meta-data中,数据被删除后,这个指针就从meta-data中清除了,而数据部分存储在磁盘中,数据对应的指针从meta-data...中清除后,文件数据部分占用的空间就可以被覆盖并写入新的内容,之所以出现删除文件后,空间还没释放,就是因为有进程还在一直向这个文件写入内容,导致虽然删除了文件,但文件对应的指针部分由于进程锁定,并未从meta-data...中清除,而由于指针并未被删除,那么系统内核就认为文件并未被删除,因此通过df命令查询空间并未释放也就不足为奇了。...解决措施有以下几种: 1)通过lsof|grep deleted命令获取到已经被删除但是仍然被应用程序占用的文件列表,然后kill掉还在占用所删除文件的进程。

    4.8K70

    sql删除一条记录后其他记录的id自动迁移,使id连续

    在写一个应用时,有这么一个操作:客户端传过来点击的位置,进行运算后得到相应数据在数据库里的id,然后显示对应的信息。...但是在进行delete后数据显示就混乱了,发现根本原因是原本连续的数据id(例如:1、2、3、4),在sqlite的delete语句执行完后(比如说删除id为2的数据),变得不连续(1、3、4)。...删除后点击第三个数据,结果他显示成第二个,而第二个早就删除了,因此显示的信息完全混乱。...解决代码如下: 在执行删除时更新表,把删除位置后面的都往前移动一位 db.execSQL("delete from tb_diary2 where _id in ("+ sb + ")",...(Object[]) ids); //更新id,使id大于要删除的id的往前移动一位。

    1.6K20

    MySQL记录删除后竟能按中间被删除的主键加回去,磁盘空间被重用!——底层揭秘MySQL行格式记录头信息

    (变长列表+NULL值列表+记录头) 1+1+5=7字节 总共13+16+7=36 注意,图中画记录的时候只选取了记录头的一部分,计算的时候直接记录头按5字节计算,加上变长列表长度和NULL值列表长度即可...4.当记录被删除,页中记录存储结构如何变化? 当然最大的疑问就是被删除的记录还在页中么?   是的,你以为记录删除了,可它还在真实的磁盘上(占用空间依然存在)。...这些被删除的记录之所以不从磁盘上移除,是因为移除它们之后,还需要再磁盘中重新排序其他记录,这会带来一定的性能损耗,所以只是打一个删除标记就可以避免这个问题,首先deleted_mask设置为1,然后被删除掉的记录加入到垃圾链表...当数据页中存在多条被删除掉的记录时,这些记录的next_record属性将会把这些被删除掉的记录组成一个垃圾链表,以备之后重用这部分存储空间。...本篇总结:   本篇主要讲了Infimum+Supremum部分,分别是页中最小记录的前一个和最大记录的后一个记录,User Records部分使我们插入的真实数据部分,Free Space是页总尚未使用的部分

    1.1K11

    K8S证书更新时-吴‘apiserver|scheduler|controller-manager’删除组件

    K8S 证书更新时-吴删除组件 [root@master ~] eth0 = 172.17.64.32 # docker rm -f docker ps | grep -E 'apiserver|scheduler...1、 起因K8S集群证书过期更新: 执行了 kubeadm certs renew all,成功更新了 Kubernetes 集群的证书(包括 API Server、Controller Manager...证书报错 2、 误删除容器: 本是重启组件服务的,眼疾手快直接删除了,以为k8s会自动拉起,后面才发现这些组件时通过这些 Pod 由 kubelet 直接管理,不依赖 Kubernetes API...node # docker ps | grep -E 'apiserver|scheduler|controller-manager' | awk '{print $1}' 问题总结: 根本问题:在证书更新后...误操作删除容器后,API Server 等组件也无法启动,进一步导致 kubelet 启动失败。

    17300

    【错误记录】Java AWT 图形界面编程问题 ( 组件按照布局要求设置后无法显示等各种问题 )

    文章目录 一、问题描述 二、在对话框中设置了组件不显示的问题 三、Frame 窗口设置组件位置失效 四、线性布局组件显示大小设置 五、容器的多重嵌套问题 六、对话框多次打开问题 七、界面跳转闪烁问题...一、问题描述 ---- 最近尝试使用 Java AWT 图形界面编程 绘制一个小界面 , 用了一周多 , 恶心坏了 ; 经常遇到 按照 布局要求 设置好代码后 , 布局不显示 , 刷新不及时 , 显示一半布局等问题...; 在本篇博客中整理下遇到的问题 ; AWT 不是一般的难用 , 赶紧学 Swing ; 二、在对话框中设置了组件不显示的问题 ---- 先显示 Dialog 对话框 , 然后根据操作需求生成指定数量的组件..., 显示在对话框中 ; 动态添加组件后 , 发现添加的组件都无法显示 ; 最后发现需要在添加后 , 调用一次 Frame#setVisibility(true) 方法 , 设置以下窗口的可见性 , 最终才能将动态添加的组件更新上去...; 只要组件发生了改动 , 就调用一次 Frame#setVisibility(true) 方法 , 多调用几次反正又不报错 ; 组件在设置前窗口已经显示 , 那么在设置了新组件之后 , 建议再次调用

    85010

    vue3,后台管理列表页面各组件之间的状态关系 管理类的功能:查询分页添加、修改删除

    表单(添加、修改) 数据提交之后,为了便于确认数据添加成功,是不是需要通知列表去更新数据呢?总不能填完数据,列表一点变化都没有吧。...删除 数据删掉了,不管是物理删除还是逻辑删除,列表里面都不需要再显示出来了。 也就是说删除后要通知列表更新数据。 总之,各个组件直接需要统筹一下状态关系。 视频演示 我们来看一下实际效果。...重新获取当前页号的列表数据,用于修改数据后的更新。 重新获取当前页号的列表数据,并且统计总记录数,用于删除数据后的更新。...其实仔细考虑一下,一些情况是不用重新统计总数的,比如翻页、修改后的更新等,这些操作都不会影响总记录数(不考虑并发操作),那么我们也就不必每次都重新统计。...删除 删除之后也会影响总记录数,所以需要重新统计,然后刷新当前页号的列表数据。

    2.3K20

    怎么缓存当前的组件?缓存后怎么更新?

    > deactivated 二、使用场景 使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive 举个栗子: 当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要...keep-alive 从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存),这时候可以按需来控制页面的keep-alive 在路由中设置keepAlive...vnode keys.push(key) // prune oldest entry /* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个...*/ else { cache[key] = vnode keys.push(key) /* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */...中缓存组件的数量是否超过了设置的最大缓存数量值this.max,如果超过了,则把第一个缓存组件删掉 四、思考题:缓存后如何获取数据 解决方案可以有以下两种: beforeRouteEnter actived

    2.9K21

    【深度学习】 Python 和 NumPy 系列教程(三):Python容器:1、列表List详解(初始化、索引、切片、更新、删除、常用函数、拆包、遍历)

    1、列表(List) 最常用的序列类型,创建后可以随意被修改,可以灵活地进行各类操作。 1. 初始化 a....常用操作(更新、删除) 列表的更新和删除操作可以用来修改列表中的元素或删除特定的元素 a....更新切片 要更新列表中的一个切片,可以使用切片操作符和赋值语句来将新的元素列表赋值给指定的切片位置。...删除单个元素 要删除列表中的单个元素,可以使用del关键字和要删除的元素的索引。...增量更新 列表还支持增量更新操作,通过使用+=运算符将新的列表与原始列表合并。

    23510

    quartz定时调度任务持久化到数据库后立即执行报错,更新任务报错引出的任务自动删除的相关问题

    最近修改项目BUG,定时任务这一块有很多的BUG,改了很久,记录一下相关BUG 问题1 问题场景: 新建一个定时任务,设置定时任务执行时间:2019-06-26 18:00:00 (即只在这个时间点执行一次...,然后就再也不执行了) 在到达执行时间之前,进行更新和立即执行都不存在任何问题。...查看任务持久化物理表,发现定时任务(只执行一次的定时任务),在执行后会自动删除。 进行代码断点,查看在何处进行的删除,没找到。...更新时直接提示时间过期,需要重新设置。...---- 标题:quartz定时调度任务持久化到数据库后立即执行报错,更新任务报错引出的任务自动删除的相关问题 作者:海加尔金鹰 地址:https://www.hjljy.cn/articles

    4K30
    领券