视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
vue 左滑删除功能的示例代码
2020-11-27 22:01:32 责编:小采
文档

最近有个需求是要添加一个左滑删除的功能。参考了一下别的老哥的代码,做了一点点改进。记录一下。以备不时之需,话不多说 ,上代码

<template>
 <div class="slider-item">
 <div
 class="content"
 @touchstart='touchStart'
 @touchmove='touchMove'
 @touchend='touchEnd'
 :style="deleteSlider"
 >
 <div class="remove">删除</div>
 </div>
 </div>
</template>
<script>
// 获取删除按钮的宽度,此宽度为滑块左滑的最大距离
const DELBTNWIDTH = 60;
export default {
 data() {
 return {
 startX: 0, // 开始pos
 endX: 0, // 结束pos
 moveX: 0, // 滑动时的pos
 disX: 0, // 滑动距离
 deleteSlider: 'transform:translateX(0px)',
 };
 },
 methods: {
 touchStart(timestamp, ev) {
 ev = ev || event;
 this.currSliderTimestamp = timestamp;
 this.startX = 0;
 // tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕
 if (ev.touches.length === 1) {
 // 记录开始位置
 this.startX = ev.touches[0].clientX;
 console.log(this.startX, this.disX);
 }
 },
 touchMove(timestamp, ev) {
 ev = ev || event;
 if (ev.touches.length === 1) {
 // 滑动时距离浏览器左侧实时距离
 this.moveX = ev.touches[0].clientX;
 //实时滑动距离,和上一次滑动做个衔接。防止第二次触发的时候,位置不对的问题
 this.disX = this.startX - this.moveX + this.disX;
 // 如果是向右滑动或者不滑动,不改变滑块的位置
 if (this.disX > 0) {
 if (this.disX < 100) {
 this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
 } else {
 this.deleteSlider = 'transform:translateX(-100px)';
 }
 } else {
 if (this.disX < -60) {
 this.deleteSlider = 'transform:translateX(60px)';
 } else {
 this.deleteSlider = 'transform:translateX(' + Math.abs(this.disX) + 'px)';
 }
 }
 }
 },
 touchEnd() {
 //滑动完成后,滑块应该在的位置
 if (this.disX < 100) {
 this.deleteSlider = 'transform:translateX(0px)';
 this.disX = 0;
 } else {
 this.deleteSlider = 'transform:translateX(-' + DELBTNWIDTH + 'px)';
 this.disX = 60;
 }
 },
 },
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.slider-item {
 width: 100%;
 height: 60px;
 border-bottom: 1px solid #eeeeee;
 overflow: hidden;
 display: flex;
 position: relative;

 .content {
 min-width: 100%;
 height: 100%;
 background: yellow;
 box-sizing: normal-box;
 padding-right: 60px;
 position: relative;
 transition-property: all;
 transition-duration: 0.4s;
 transition-timing-function: cubic-bezier(0, 0.85, 0.72, 0.86);
 transition-delay: 0s;

 .remove {
 position: absolute;
 top: 0;
 right: 0;
 width: 60px;
 height: 60px;
 background: #fe5ba8;
 text-align: center;
 line-height: 60px;
 font-size: 15px;
 color: #ffffff;
 }
 }
}
</style>

参考实例

下载本文
显示全文
专题