VUE开发一个组件——Vue list列表滑动删除

前言

滑动删除，在很多APP软件里面可以见到，比如淘宝的订单列表，QQ微信的聊天记录等等，今天就来看看Javascript是如何实现这个功能的，之所以说是vue，主要是框架是vue啦，主要还是JS+CSS部分。

页面部分

页面就超级简单咯，遍历一个列表，添加touchstart和touchend事件，并添加删除按钮。如果滑动就添加move类样式，向左滑动60px。

	

	  {{item.text}}{{item.id}}
	  
删除
	

li{
  background: #fdfdfd;
  border-bottom: 1px solid #e1e1e1;
  line-height: 40px;
  position: relative;
  transform: translateX(0);
  transition: all .3s; 
  padding-left: 10px;
}
ul{
  overflow-x: hidden; 
}
li.move {
  transform: translateX(-60px); 
}
.del {
  position: absolute;
  top: 0;
  right: -1px;
  z-index: 3;
  width: 60px;
  height: 100%;
  text-align: center;
  color: #fff;
  background-color: #ff5b45;
  transform: translateX(60px); 
}

data数据部分

data() {
	return {
		// 数据
		list: [{
		  id: 1,
		  text: '请左滑动删除我吧'
		},{
		  id: 2,
		  text: '请左滑动删除我吧'
		},{
		  id: 3,
		  text: '请左滑动删除我吧'
		},{
		  id: 4,
		  text: '请左滑动删除我吧'
		},{
		  id: 5,
		  text: '请左滑动删除我吧'
		},{
		  id: 6,
		  text: '请左滑动删除我吧'
		}],
		clientNum: {}, // 记录开始滑动（x1）,结束滑动（x2）的鼠标指针的位置
		candelete: {}, // 滑动的item
	}
}

事件部分

methods: {
  
  deleteItem(index){
	this.list.splice(index, 1)
	// splice方法是删除数组某条数据，或者向某个位置添加数据
  },
  touchStart(item) {
	let touchs = event.changedTouches[0];
	// 记录开始滑动的鼠标位置
	this.clientNum.x1 = touchs.pageX;
	this.candelete = {};
  },
  touchEnd(item) {
	let touchs = event.changedTouches[0];
	// 记录结束滑动的鼠标位置
	this.clientNum.x2 = touchs.pageX;
	this.candelete = {};
	// 判断滑动距离大于50，判定为滑动成功，否则失败
	if (
	  this.clientNum.x2 < this.clientNum.x1 &&
	  Math.abs(this.clientNum.x1) - Math.abs(this.clientNum.x2) > 50
	) {
	  event.preventDefault();
	  this.candelete = item;
	} else if (
	  this.clientNum.x2 > this.clientNum.x1 &&
	  Math.abs(this.clientNum.x2) - Math.abs(this.clientNum.x1) > 10
	) {
	  event.preventDefault();
	  this.candelete = {};
	}
  }
}

就这样愉快的结束了，是不是很简单了？

推荐文章

《ES6中Array数组你应该知道的操作》
《你对Javascript的Array对象了解有多少？》
《CSS3中transition、transform傻傻分不清楚》