vue 左滑删除功能的示例代码
程序员文章站
2023-11-14 21:58:52
最近有个需求是要添加一个左滑删除的功能。参考了一下别的老哥的代码,做了一点点改进。记录一下。以备不时之需,话不多说 ，上代码
...
最近有个需求是要添加一个左滑删除的功能。参考了一下别的老哥的代码,做了一点点改进。记录一下。以备不时之需,话不多说 ，上代码
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： ThinkPHP通过AJAX返回JSON的两种实现方法
下一篇： vue.js的提示组件