首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

小程序 — 实现删除效果①

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

2.6K20

Android使用CardView作为RecyclerView的Item并实现拖拽和删除

大致意思就是,这是个工具类,可以实拖拽移动和策划删除,使用这个工具需要RecyclerView和Callback。同时需要重写onMove()和onSwiped()方法。...我们选择使用一个接口来实现Adapter和ItemTouchHelper之间涉及数据的操作,因为ItemTouchHelper完成触摸的各种动画以后,就要对Adapter的数据进行操作,比如我们在侧删除以后...interface ItemTouchHelperAdapter { //移动item public void onItemMove(int fromPosition,int toPosition); //删除...ItemView拖动 return true; } @Override public boolean isItemViewSwipeEnabled() { //该方法返回true时,表示如果用户触摸并且滑了...view,那么可以执行滑动删除操作,就是可以调用onSwiped()方法 return true; } } ItemTouchHelper.Callback还有其他几个常用方法: public void

1.9K10

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

什么是删除 用过QQ的人都知道,消息列表内,单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说,这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。...v.isTouchMove = false else // v.isTouchMove = true } }) return...{ userInfo: null }, touch: new touch() //实例化这个touch对象 }) 然后去引用这个touch.js文件,在app.js文件中 末尾 到这里删除就告一段落了...,主要就是先使用css将删除按钮隐藏起来,然后通过监听touch事件去改变列表中每一项的一个属性,间接修改这个条目的样式将删除按钮显示出来 源码上传至github 微信小程序之列表删除功能 原文地址...微信小程序之列表删除功能

89730

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

什么是删除 用过QQ的人都知道,消息列表内,单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说,这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。 ?...实现原理 最外层一个view水平方向排列,里面包含一个内容区view,一个操作区view 让你要展示的布局充满屏幕,通过css样式让超出的删除按钮隐藏 监听touch事件,平移布局显示和隐藏删除按钮(列表每一项中有一个...v.isTouchMove = false else // v.isTouchMove = true } }) return...touch.js'//新加 App({ globalData: { userInfo: null }, touch: new touch() //实例化这个touch对象 }) 末尾 到这里删除就告一段落了...,主要就是先使用css将删除按钮隐藏起来,然后通过监听touch事件去改变列表中每一项的一个属性,间接修改这个条目的样式将删除按钮显示出来 源码上传至github 微信小程序之列表删除功能

2.7K30

移动端组件

最近有个需求,移动端有导航,需要的时候就能切换导航,跟轮播一样的效果,但是轮播内容少,而且是一次性加载数据。...自己写了个的组件。我一直觉得写组件最重要的就是理解原理和理清思路。...这样就实现了一个元素的效果。 接着考虑当手指松开的时候触发touchEnd方法,获取endX,endX减去startX或者是移动过程中的距离,大于0就是手指向右滑动,小于0就是向左滑动。...因为是组件,我们把还是右返回,把可能需要用到的移动过程中的距离也返回。最后,我们在移动一点点距离的时候不一定要,所以需要一个最小的滑动距离。...position: relative; width: 100%; background: #42b983; } 可以自己使用一下,顺便提一下,上拉加载下拉刷新之前是分开的,增加了一个一起的,加上

1K10

Android源码解析--SwipeMenuListView仿QQ聊天

https://blog.csdn.net/lyhhj/article/details/50612714 绪论: 好久没写博客了,最近比较懒,不想写博客,但是在看书,看一些Android进阶的书...《Android群英传》 —徐宜生 2.《Android开发艺术探索》 —任玉刚 3....《Android源码设计模式》 —何红辉,郭爱民 以上几本是针对Android开发所用的,如果上面三本你都吃透了的话,相信你就可以在Android的世界里尽情的翱翔了。...《MacTalk跨越边界》 好了,下面进入正题吧,今天小编给大家分享的是:仿QQ聊天实现效果,先看一下效果吧: image.png 实现: 1.定义滑动选项视图 通过监听滑动手势弹出滑动选项卡...Color.WHITE); // 添加选项 menu.addMenuItem(showItem); // 创建删除选项

71210

Android自定义组合控件---教你如何自定义下拉刷新和删除

https://blog.csdn.net/lyhhj/article/details/80122918 绪论 最近项目里面用到了下拉刷新和删除,网上找了找并没有可以用的,有比较好的删除...比QQ多了个上拉加载,好了看看怎么实现的吧,小编在之前的游客评论中了解到,代码注释很重要,所以尽量把注释写的很清楚: 实现思路 由于时间有限,菜单是在网上找的Demo 自定义下拉刷新头、尾 手势判断...,根据滑动距离显示头部下拉布局 判断是否滑动到底部显示尾部上拉布局 创建菜单,根据手势滑动事件弹出菜单 详细的看一下实现过程 1.首先我们先自定义下拉头布局: <?...getVisiableHeight() { return mContainer.getHeight(); } } 3.HeaderView定义结束后,我们需要自定义一个既支持下拉刷新又支持删除的...animation.cancel(); } }); v.startAnimation(animation); } 好了到这里了,我们的组合控件-上拉下拉+删除的组合

1.4K10

Android仿抖音右清屏列表功能的实现代码

所以,很明显在Item的布局上包一层,实现清屏和侧列表的功能就可以了,这样每个房间都可以上下滑,切换房间。...isSliderGoning) { // 滑入情况下,向右一段松开,再向右,清除回弹动画,跟随手势 mSlideInAnimator.cancel()...isSliderGoning) { // 滑入情况下,向右一段松开,再向右,清除回弹动画,跟随手势 mSlideInAnimator.cancel() translateSlideView(offsetX...xVelocity) 1) { if (isCleared && offsetX < 0) { // 清屏情况下,速度超过10个像素时 ===》滑入清屏控件 layerShowWithAnim(...仿抖音右清屏列表功能的实现代码的文章就介绍到这了,更多相关android 抖音右清屏列表内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!

2.3K21

Android 事件分发】ItemTouchHelper 实现侧删除

】ItemTouchHelper 实现侧删除 ( 设置滑动方向 | 启用滑动操作 | 滑动距离判定 | 滑动速度判定 | 设置动画时间 | 设置侧触发操作 ) 【Android 事件分发】ItemTouchHelper...配置侧删除 1、设置移动标志 ( 拖动/滑动 ) 2、启用滑动动作 3、滑动距离判定设置 4、滑动速度判定设置 5、设置动画时间 6、设置侧删除触发操作 7、RecyclerView.Adapter...; 下面的操作中 , 滑动在水平方向上没有超过组件宽度的 0.5 倍 , 滑动删除不生效 ; 下面的操作中 , 水平方向的滑动幅度超过了 0.5 倍 , 侧删除生效 ; 侧判定 : 这里有两种侧判定条件..., 满足任意一个即可触发侧删除 ; ① 条件一 : getSwipeThreshold 方法中设置的滑动距离 , 滑动超过 0.5 滑动幅度 , 触发侧删除 ; ② 条件二 : getSwipeEscapeVelocity...: 这里有两种侧判定条件 , 满足任意一个即可触发侧删除 ; ① 条件一 : getSwipeThreshold 方法中设置的滑动距离 , 滑动超过 0.5 滑动幅度 , 触发侧删除 ; ②

53120
领券