首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

listview滑动删除

今天还是给大家带来自定义控件的编写,自定义一个ListView的左右滑动删除Item的效果,这个效果之前已经实现过了,有兴趣的可以看下Android 使用Scroller实现绚丽的ListView左右滑动删除...Item效果,之前使用的是滑动类Scroller来实现的,但是看了下通知栏的左右滑动删除效果,确实很棒,当我们滑动Item超过一半的时候,item的透明度就变成了0,我们就知道抬起手指的时候item就被删除了...,当item的透明度不为0的时候,我们抬起手指Item会回到起始位置,这样我们就知道拖动到什么位置item会删除,什么位置Item不删除,用户体验更好了,还有一个效果,就是我们滑动删除了item的时候,...   public void onDismiss(int dismissPosition);       }   }   看过Android 使用Scroller实现绚丽的ListView左右滑动删除...ObjectAnimator.ofInt(mDownView, "scaleX", 0 ,100 ,0, 100).setDuration(100).start()   通过上面的几步我们就实现了ListView的左右滑动删除

1.8K70
您找到你想要的搜索结果了吗?
是的
没有找到

Flutter 滑动删除最佳实践

滑动去存档,也可以滑动删除。 那作为Google 自家出品的Flutter,当然也会有这种组件。...child不必多说,就是我们需要滑动删除的组件,那key是什么? 后续我会出一篇关于 Flutter Key 的文章来详细解释一下什么是 Key。...}); }, 增加视觉效果 虽然我们处理了删除后的逻辑,但是我们在滑动的时候,用户还是不知道我们在干什么。...通过查看注释我们了解到: background 是向右滑动展示的,secondaryBackground是向左滑动展示的。 如果只有一个 background,那么滑右滑都是它自己。...处理不同滑动方向的完成事件 那现在问题就来了,既然我现在有两个滑动方向了,就代表着两个业务逻辑。 这个时候我们应该怎么办?

2K20

小程序 — 实现删除效果①

前言:实现这个效果有几种方式,大家可以看看这篇文章从京东购物,印象笔记看小程序滑交互的实现 ,而我们就使用最新的方案,就是用movable-view来实现删除的效果。...小程序实现删除效果 1、movable-area基本概念 大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解。...,不同在于,接着往下看; 注意:movable-area 必须设置width和height属性,不设置默认为10px (2)movable-view这个就是一个可移动的视图容器,可以在页面中拖拽滑动...3、小结 这样,我们的页面基本结构就实现了,到这里,我们还有这么几个问题需要解决完善: 事件的监听,当超过最大滑动距离时,让movable-view提供一个非常流畅的过界动画和回弹效果; 设置阈值,往左移动超过阈值则显示删除按钮...,否则隐藏(一般为删除按钮宽的40%); 我们下章再讲。

2.6K20

小程序 — 实现删除效果(列表)③

前言:实现完整的列表删除功能。...[idx].x = 0; this.setData({ list: this.list }); } } 上面几行代码很重要,解决了这么一个问题: 列表渲染的问题,由于js...中关于列表渲染的注意事项,原理是一样的:https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 (3)最后就是删除功能的实现...同理我们也需要获取用户点击删除按钮的索引值,然后进行删除,很简单不多说,看代码: handleDelete(idx) { this.list.splice(idx, 1); this.setData...({ list: this.list }); } 3、小结 这就是我们实现删除效果的全部内容了,利用了小程序的movable组件实现了大部分的功能,关于js主要是在处理列表渲染的时候,这里是个坑

1K30

微信小程序之列表删除功能

什么是删除 用过QQ的人都知道,消息列表内,滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说,这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。....js文件,防止以后还会用到。...touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标 //获取滑动角度 angle = this....}) 然后去引用这个touch.js文件,在app.js文件中 末尾 到这里删除就告一段落了,主要就是先使用css将删除按钮隐藏起来,然后通过监听touch事件去改变列表中每一项的一个属性,间接修改这个条目的样式将删除按钮显示出来...源码上传至github 微信小程序之列表删除功能 原文地址 微信小程序之列表删除功能

89730

微信小程序删除效果的实现

今天我们说下微信小程序删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果...先看效果 先看效果 1、当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2、当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置...思路 1、首先页面每个item分为上下两层,上面一层放置正常内容,下面一层放置滑显示出的按钮,这个可以使用z-index来实现分层。...由于比较简单,所以直接上代码了,详细的讲解都在代码的注释中: 首先看下页面的布局 再看JS代码 结束!

1.3K30
领券