移动端---左滑删除组件

实现思路

具体实现思路如下：

布局方面我采用的是 rem + flex 布局，具体如何结构和样式可以参考我的代码，值得注意的是后面的删除按钮是我通过定位放在了每一行的最后，超出隐藏了而已
左滑和右滑是通过 touchstart 和 touchend 事件，通过判断滑动开始和结束，水平方向 x 的偏移量，如果大于一定得阈值认为是左滑动，小于一定的阈值则认为是右滑动
左滑动和右滑动分别都是通过父级 li 元素的 translate 偏移量进行变化的，这里我的实现方式是提前声明好样式，通过改变当前父级 li 的 type 值，进行样式切换
点击某一个滑块的时候，首先判断当前所有的滑块是否有处于滑出状态的，如果有，则必须先将所有的滑块状态还原，如果没有，则点击生效，我这里只是弹出一个 alter ，具体业务可以根据实际填写
删除相对简单，当滑块画出后，出现删除按钮，点击按钮，拿到当前的数组索引值，通过数组的 splice 方法，删除对应的数组值即可

具体实现

Html代码

<div class="container">

<div class="page-title">滑动组件</div>

<ul>

<li class="list-item " v-for="(item,index) in list " data-type="0">

<div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip">

<img class="list-img" :src="item.imgUrl" alt="">

<div class="list-content">

<p class="title">{{item.title}}</p>

<p class="tips">{{item.tips}}</p>

<p class="time">{{item.time}}</p>

</div>

<div class="delete" @click="deleteItem" :data-index="index">删除</div>

</li>

</ul>

</div>

注意：我这里的数据全是本地 mock 的~

Css样式代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

.page-title{

text-align: center;

font-size: 17px;

padding: 10px 15px;

position: relative;

}

.page-title:after{

content: " ";

position: absolute;

left: 0;

bottom: 0;

right: 0;

height: 1px;

border-bottom: 1px solid #ccc;

color: #ccc;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

z-index: 2;

}

.list-item{

position: relative;

height: 1.6rem;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.list-item[data-type="0"]{

transform: translate3d(0,0,0);

}

.list-item[data-type="1"]{

transform: translate3d(-2rem,0,0);

}

.list-item:after{

content: " ";

position: absolute;

left: 0.2rem;

bottom: 0;

right: 0;

height: 1px;

border-bottom: 1px solid #ccc;

color: #ccc;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

z-index: 2;

}

.list-box{

padding: 0.2rem;

background: #fff;

display: flex;

align-items: center;

-webkit-box-sizing: border-box;

box-sizing: border-box;

justify-content: flex-end;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

font-size: 0;

}

.list-item .list-img{

display: block;

width: 1rem;

height: 1rem;

}

.list-item .list-content{

padding: 0.1rem 0 0.1rem 0.2rem;

position: relative;

flex: 1;

flex-direction: column;

align-items: flex-start;

justify-content: center;

overflow: hidden;

}

.list-item .title{

display: block;

color: #333;

overflow: hidden;

font-size: 15px;

font-weight: bold;

text-overflow: ellipsis;

white-space: nowrap;

}

.list-item .tips{

display: block;

overflow: hidden;

font-size: 12px;

color: #999;

line-height: 20px;

text-overflow: ellipsis;

white-space: nowrap;

}

.list-item .time{

display: block;

font-size: 12px;

position: absolute;

right: 0;

top: 0.1rem;

color: #666;

}

.list-item .delete{

width: 2rem;

height: 1.6rem;

background: #ff4949;

font-size: 17px;

color: #fff;

text-align: center;

line-height: 1.6rem;

position: absolute;

top:0;

right: -2rem;

}

这是核心的样式代码

移动端---左滑删除组件

相关推荐