this.disX = this.startX - this.moveX;
//console.log(this.disX)
// 如果是向右滑动或者不滑动，不改变滑块的位置
if (this.disX < 0 || this.disX == 0) {
this.deleteSlider = "transform:translateX(0px)";
} else if (this.disX > 0) {// 大于0，表示左滑了，此时滑块开始滑动
//具体滑动距离我取的是 手指偏移距离*5。
this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)";
// 最大也只能等于删除按钮宽度
if (this.disX*5 >= wd) {
this.deleteSlider = "transform:translateX(-" +wd+ "px)";
}
}
}
},
touchEnd(ev){
ev = ev || event;
let wd = this.$refs.remove.offsetWidth;
if (ev.changedTouches.length == 1) {
let endX = ev.changedTouches[0].clientX;
this.disX = this.startX - endX;
//console.log(this.disX)
//如果距离小于删除按钮一半,强行回到起点
if ((this.disX*5) < (wd/2)) {
this.deleteSlider = "transform:translateX(0px)";
}else{
//大于一半 滑动到最大值
this.deleteSlider = "transform:translateX(-"+wd+ "px)";
}
}
},
deleteLine (){
this.deleteSlider = "transform:translateX(0px)";
this.$emit('deleteLine');
}
}
}
</script>
我们在代码中主要用到三个移动端触控事件：
touchstart : 手指放到屏幕上时触发
touchmove : 手指在屏幕上滑动式触发
touchend ：手指离开屏幕时触发
每个触控事件被触发后，会生成一个event对象，event对象里额外包括以下三个触控列表
touches : 当前屏幕上所有手指的列表
targetTouches : 当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches : 涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触控由touch对象组成，touch对象里包含着触控信息，主要属性如下：
clientX / clientY : 触摸点相对浏览器窗口的位置
pageX / pageY : 触摸点相对于页面的位置
screenX / screenY : 触摸点相对于屏幕的位置
在上述代码中还可以看到，当滑块没有超过删除按钮的一半时自动回到起点位置。点击删除后调用deleteLine删除当前行。
组件调用
我们在HelloWorld.vue中建立模板，引入组件deleteSlider，代码如下：
<template>
<div class="mylist">
<delete-slider v-for="(list, index) in dataList" :key="index" @deleteLine="deleteLine(index, list.id)">
<div class="li-img" slot="img"><img :src="list.img" alt=""></div>
<h3 class="li-title" slot="title">{{list.title}}</h3>
