原生js实现一个侧滑删除取消组件（item slide）
组件，本质上是解决某个问题封装的类，在此记录原生js实现侧滑删除
先上效果图
实现思路
1. 确定渲染的数据结构
2. 思考划分布局，总的有两个主要的模块：内容区域和按钮区域
2.1 内容区域保持宽度永远占满设备的宽度
2.2 内容区域和按钮区域之和的宽度等于每一行item的总宽度
3. 每行超出的item的部分设置overflow: hidden; 通过touch相关的API事件监听手势是左滑还是右滑
4. 左滑的时候通过改变元素的一个特定属性来表明左滑，右滑同理
5. 通过css3 slector提前写好左滑情况和右滑情况下的样式，这里的样式主要是改变item的左右偏移
6. 创建元素的时候做的一些性能优化，尽量减少reflow，reflow的来源是由于dom的改变引起的，所以可以思考先将所有元素都写好后一次性插入，减少dom的变化，减少reflow
7. 左滑和右滑的样式的动画优化，让滑动更自然，这里使用了过度效果
整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=0">
<title>item slide</title>
<style type="text/css">
body,p {
margin: 0;
}
.list-container {
padding: 0;
overflow: hidden;
margin: 0;
}
.item-container {
list-style: none;
border-bottom: 0.5px solid #9e9e9e73;
width: calc(100% + 10em);
display: flex;
align-items: stretch;
transition: all ease-in-out 0.2s;
}
.left-contianer {
padding: 10px 10px;
flex: 100%;
}
.delete-container,
.cancle-container {
width: 5em;
background: #f44336;
position: relative;
} .delete-Content,
.cancle-Content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
} .delete-container{
border-right: 0.5px solid #ffffff80;
} .item-container[data-type = "1"]{
transform: translate3d(-10em, 0, 0);
} .item-container[data-type = "0"]{
transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<ul class="list-container"></ul> <script type="text/javascript"> let list = [
{
remark:'1111111',
value: '1111111dsdsdsdsdadsd'
},
{
remark: '2222222',
value: '2222222ssdsdadsdsadsa'
},
{
remark: '3333333',
value: '3333333sfsdsddsdsd'
}
]; class ItemSlide {
constructor(obj){
this.data = obj['data'] ? obj['data'] : [];
this.name = obj['name'] ? obj['name'] : 'name';
this.value = obj['value'] ? obj['value'] : 'value';
this.startX = 0;
this.endX = 0;
} init(){
this.listContainer = document.querySelector('.list-container');
this.fragment = document.createDocumentFragment();
this.render();
} render(){
this.data.map((v, i) => {
let item = document.createElement('li');
item.classList.add('item-container');
item.setAttribute('resource-id', i);
item.addEventListener('touchstart', this.touchStart.bind(this));
item.addEventListener('touchend', this.touchEnd.bind(this)) let leftContianer = document.createElement('div');
leftContianer.classList.add('left-contianer'); let name = document.createElement('p');
name.textContent = v[this.name]; let address = document.createElement('p');
address.textContent = v[this.value]; leftContianer.appendChild(name);
leftContianer.appendChild(address); let deleteBtn = document.createElement('div');
deleteBtn.classList.add('delete-container');
deleteBtn.addEventListener('click', this.delItem.bind(this), true); let deleteContent = document.createElement('span');
deleteContent.textContent = 'delete';
deleteContent.classList.add('delete-Content');
deleteBtn.appendChild(deleteContent); let cancleBtn = document.createElement('div');
cancleBtn.classList.add('cancle-container'); let cancleContent = document.createElement('span');
cancleContent.textContent = 'cancle';
cancleContent.classList.add('cancle-Content');
cancleBtn.appendChild(cancleContent); item.appendChild(leftContianer);
item.appendChild(deleteBtn);
item.appendChild(cancleBtn); this.fragment.appendChild(item);
});
this.listContainer.appendChild(this.fragment);
} touchStart(e) {
this.startX = e.touches[0].clientX;
} touchEnd(e) {
const liEl = e.target.parentElement.parentElement; this.endX = e.changedTouches[0].clientX;
let distance = this.startX - this.endX; // 左滑
if(distance > 0) {
this.setSlide(liEl);
// 右滑
}else if(distance < 0) {
this.resetSlide(liEl);
}
} setSlide(el){
el.setAttribute('data-type', "1");
} resetSlide(el) {
el.setAttribute('data-type', "0");
} delItem(e){
const parentEl = this.findParent(e, 'resource-id');
this.listContainer.removeChild(parentEl);
} findParent(childEl, attr){
const parentEl = childEl.target ?
childEl.target.parentElement :
childEl.parentElement;
const id = parentEl.getAttribute(attr);
if(id) {
return parentEl;
}
return this.findParent(parentEl, attr);
} } new ItemSlide({
data: list,
name: 'remark'
}).init();
</script>
</body>
</html>
PS：
代码中的创建节点感觉写得有点冗余，如果有刚简便并且要考虑到性能的好写法欢迎留言
原生js实现一个侧滑删除取消组件（item slide）的更多相关文章
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 用原生JS实现一个轮播（包含全部代码和详细思路）
在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- 原生 JS实现一个简单分页插件
最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
随机推荐
- CF148D. Bag of mice（概率DP）
D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- 【shell】判断一个变量是否为空
#!/bin/bash argv=" if [ -z "$argv" ] then echo "argv is empty" else echo &q ...
- 单机部署tomcat的shell脚本
单机部署tomcat的shell脚本,来自网络,自己需要时要根据自己的需求改动. #!/bin/sh # ############################################### ...
- iOS define 宏定义 和 const定义常量区别
const const 是c++中的修饰符. c++中常用来定义常量,修饰左值. #define 宏定义语句, 在预处理阶段直接做文本替换,不做类型检查. 它们之间的最大区别: 1. 对于co ...
- EASYARM-IMX283 编译uboot和uImage
本文是按照IMX283配套光盘的流程重新编译uboot和uImage将光盘中的gcc-4.4.4-glibc-2.11.1-multilib-1.0_EasyARM-iMX283.tar.bz2 解压 ...
- （1）Java多线程编程核心——Java多线程技能
1.为什么要使用多线程?多线程的优点? 提高CPU的利用率 2.什么是多线程? 3.Java实现多线程编程的两种方式? a.继承Thread类 public class MyThread01 exte ...
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
- HTML5 SVG实现过山车动画
HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...
- PHP的深copy和浅copy
1.对象复制的由来 为什么对象会有“复制”这个概念,这与PHP5中对象的传值方式是密切相关的,让我们看看下面这段简单的代码 /** * 电视机类 */ class Television { /** * ...
- 【Lintcode】076.Longest Increasing Subsequence
题目: Given a sequence of integers, find the longest increasing subsequence (LIS). You code should ret ...