基于vue2实现左滑删除功能
赵海辛 人气:1左滑删除，很多UI框架里有，比如Mint-UI， Muse-UI等，一开始我们就是用的这两个，但是我们需求是要：左滑的时候出现img然后来实现点击删除，如下：
因为用UI框架，还得改底层代码= =所以，我们小组就直接写了一个- -，心累……此组件多地方使用，所以建议还是放到common下。。
<template>
<div class="left-delete">
<div class="move"
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
:style="txtStyle">
<slot></slot>
</div>
<div class="deleteIcon" :style="zIndex" @click.prevent="deleteItem(index)"></div>
</div>
</template>
<script>
export default {
props: {
index: Number
},
data() {
return {
startX: 0, //触摸位置
moveX: 0, //滑动时的位置
disX: 0, //移动距离
txtStyle: '',
delWidth: 200,
top: '',
zIndex: 'z-index:-1',
}
},
methods: {
_touchStart: function(ev) {
ev = ev || event;
if(ev.touches.length == 1){
// 手指按下的时候记录按下的位置
this.startX = ev.touches[0].clientX;
console.log(this.startX)
}
},
_touchMove: function(ev) {
ev = ev || event;
if(ev.touches.length == 1) {
// 滑动过程中的实时位置
this.moveX = ev.touches[0].clientX
// 滑动过程中实时计算滑动距离
this.disX = this.startX - this.moveX;
// console.log('disX==>',this.disX)
// 如果是向右滑动或者只是点击，不改变滑动位置
if(this.disX < 0 || this.disX == 0) {
// console.log('没有移动');
this.txtStyle = "transform:translateX(0rem)";
}else if (this.disX > 0) {
如果是向左滑动，则实时给这个根元素一个向左的偏移-left，当偏移量到达固定值delWidth时，固定元素的偏移量为 delWidth
this.txtStyle = "transform:translateX(-" + this.disX/100 + "rem)";
if (this.disX >= this.delWidth/100) {
this.txtStyle = "transform:translateX(-" + this.delWidth/100 + "rem)";
this.zIndex = "z-index:" + 10 + "rem";
}
}
}
},
_touchEnd: function(ev) {
if (event.changedTouches.length == 1) {
this.startX = 0;
this.zIndex = "z-index:" + -1 + "rem";
console.log(event.changedTouches[0].clientX)
// 手指移动结束后的水平位置
let endX = event.changedTouches[0].clientX;
// 触摸开始与结束,手指移动的距离
this.disX = this.startX - endX;
//如果距离小于删除按钮的1/2，不显示删除按钮
}
},
deleteItem: function(index) {
this.$emit('deleteItem', index);
}
}
}
</script>
<style>
.left-delete{
width:100%;
height:100%;
position:relative;
z-index:2;
}
.move{
position: relative;
}
.deleteIcon{
width: 2rem;
height:100%;
position: absolute;
right:0;
top:0;
background:url(./../../assets/main/4.png) no-repeat;
background-size: contain;
}
</style>
然后哪个页面需要，哪个页面引入就好。比如myCollect页面需要，那么如下：
<template>
<section class="myCollect">
<section>
<div v-for="(item,index) in collectionList">
<left-slider :index="index" @deleteItem="deleteItem">
<Financial :item="item" :index="index"></Financial>
</left-slider>
</div>
</section>
</section>
</template>
<script>
import api from './../../fetch/api';
import { mapGetters } from 'vuex';
import Financial from './../common/financial.vue';
import LeftSlider from './../common/leftSlider.vue';
export default {
name: 'MyCollect',
props: {
item: Object,
index: Number
},
components: {
Financial,
LeftSlider
},
data() {
return {
}
},
created() {
this.getCollectionList();
},
methods: {
},
computed: {
...mapGetters([
'getContextPathSrc',
'sessionId',
'token'
]),
},
methods: {
// 删除
deleteItem: function(index) {
api.commonApi('后台接口，请求数据')//此处api是封装的axios，详情看文章：vue2+vuex+axios即可
.then(res => {
console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);
this.collectionList.splice(index, 1);
});
}
},
mounted() {
}
}
</script>
然后就完成了。
加载全部内容