H5仿手Q左滑删除功能组件

mayaohua 发布于2019-08-21 14:19 / 587人阅读

摘要：背景前不久遇到一个需求，列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定体验了一下手原生滑动功能，在此之前对于滑块的具体动效提出了几个问题。最终效果组件源码后话同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。

背景

前不久遇到一个需求，h5列表页实现左滑删除功能。

首先对下文有关滑块的指代标识做出统一规定

体验了一下手Q原生滑动功能，在此之前对于滑块的具体动效提出了几个问题。（希望大家也去观察体验一下，网上很多现成的代码都存在效果上的差异）

控制单条li滑动还是控制li中内容块滑动

是否允许多条内容块同时展开

当列表上下滑动时，内容块是否需要收起

在观察原生滑动功能后，对上述问题做出如下解答

控制li中内容块滑动，通过设置层级关系使得初始状态时按钮租处于内容块之下

否

是

实现 dom与css

/* html结构 */

    
      
        第11金!马龙4-0张继科乒球男单夺冠成就大满贯伟业
      
      
        删除
      
    


/* style 此处省略部分样式 */

得到如下图的列表

等我有空再细说好了 =-=大家去看源码吧。

最终效果：

组件源码

https://github.com/yvonnevv/S...

后话：
同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。
恩，会进行迭代的（°ˊдˋ°）°°

云服务器 GPU云服务器左滑删除 h5扫码功能 datav怎么删除组件删除功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87876.html

H5仿手Q左滑删除功能组件

摘要：背景前不久遇到一个需求，列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定体验了一下手原生滑动功能，在此之前对于滑块的具体动效提出了几个问题。最终效果组件源码后话同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。背景前不久遇到一个需求，h5列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定 showImg(https://segmentfa...

laznrbfe 2019-08-29 11:09 评论0 收藏0
H5仿手Q左滑删除功能组件

摘要：背景前不久遇到一个需求，列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定体验了一下手原生滑动功能，在此之前对于滑块的具体动效提出了几个问题。最终效果组件源码后话同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。背景前不久遇到一个需求，h5列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定 showImg(https://segmentfa...

wujl596 2019-08-01 15:36 评论0 收藏0
前端实现列表左滑删除（react）

摘要：而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过的。来判断当前是左滑还是右滑，左滑时在减小，而右滑时变大。并且记录下当前滑动的是第几项。最近做了一个类似系统操作的左滑删除的demo，用的taro框架，和大家分享一下~首先需要考虑的有以下几点：1）布局；2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位；3）排他性，意思是某一个时间只...

everfight 2019-08-02 15:27 评论0 收藏0