技術標籤：vue.jscss3vue.jsjavascript

仿QQ微信列表左滑刪除效果

1.實現思路

通過兩個事件touchstart，touchend，結合css樣式

2.程式碼

列表部分就是正常的vue迴圈渲染

<div class="container">
				<ul>
						<li class="list-item" v-for="(item,index) in billList" data-type="0">
								<
 
div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip(item.keyid,item.org_code,item.state)">
										<div class="list-content">
											<p class="idx">{{index + 1}}</p>
											<
 
p class="title">{{item.carNo}}</p>
											<p class="time">{{item.name}}</p>
											<p class="tips">{{item.productName}}</p>
											<p class="center">{{item.weight}}(噸)</p>
											<p class="bottom"
 
>{{item.billNo}}</p>
										</div>
								</div>
								<div class="delete" @click="deleteItem(item.keyid,item.org_code,item.carNo,item.id)" :data-index="index">撤銷</div>
								<div class="edit" @click="editItem(item.keyid)" :data-index="index">編輯</div>
						</li>
				</ul>
</div>

data: {
      startX: 0, // 滑動開始位置
	  endX: 0,  // 滑動結束位置
}

methods: {
				    //跳轉
					skip(id, org_code, state) {
							if (this.checkSlide()) {
								this.restSlide();
							} else {
							}
						},
					//滑動開始
					touchStart(e) {
							// 記錄初始位置
							this.startX = e.touches[0].clientX;
					},
					//滑動結束
					touchEnd(e) {
							// 當前滑動的父級元素
							let parentElement = e.currentTarget.parentElement;
							// 記錄結束位置
							this.endX = e.changedTouches[0].clientX;
							// 左滑
							if (parentElement.dataset.type == 0 && this.startX - this.endX > 5) {
								this.restSlide();
								parentElement.dataset.type = 1;
							}
							// 右滑
							if (parentElement.dataset.type == 1 && this.startX - this.endX < -5) {
								this.restSlide();
								parentElement.dataset.type = 0;
							}
							this.startX = 0;
							this.endX = 0;
					},
					//判斷當前是否有滑塊處於滑動狀態
					checkSlide() {
							let listItems = document.querySelectorAll('.list-item');
							for (let i = 0; i < listItems.length; i++) {
								if (listItems[i].dataset.type == 1) {
									return true;
								}
							}
							return false;
					},
					//復位滑動狀態
					restSlide() {
							let listItems = document.querySelectorAll('.list-item');
							// 復位
							for (let i = 0; i < listItems.length; i++) {
								listItems[i].dataset.type = 0;
						}
				},
}

			// css style
			.list-item {
				position: relative;
				height: 4rem;
				-webkit-transition: all 0.2s;
				transition: all 0.2s;
			}

			.list-item[data-type="0"] {
				transform: translate3d(0, 0, 0);
			}

			.list-item[data-type="1"] {
				transform: translate3d(-8rem, 0, 0);
			}

			.list-item:after {
				content: " ";
				position: absolute;
				left: 0.2rem;
				bottom: 0;
				right: 0;
				height: 1px;
				border-bottom: 1px solid #ccc;
				color: #ccc;
				-webkit-transform-origin: 0 100%;
				transform-origin: 0 100%;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				z-index: 2;
			}

			.list-box {
				padding: 0.2rem;
				background: #fff;
				display: flex;
				align-items: center;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				justify-content: flex-end;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				font-size: 0;
			}

			.list-item .list-img {
				display: block;
				width: 1rem;
				height: 1rem;
			}

			.list-item .list-content {
				padding: 0.1rem 0 0.1rem 0.2rem;
				position: relative;
				flex: 1;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				overflow: hidden;
			}

			.list-item .title {
				display: block;
				color: #333;
				overflow: hidden;
				font-size: 15px;
				margin-left: 28px;
				font-weight: 500;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.list-item .tips {
				display: block;
				overflow: hidden;
				font-size: 12px;
				color: #999;
				margin-left: 28px;
				line-height: 20px;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.list-item .time {
				display: block;
				font-size: 12px;
				position: absolute;
				right: 5px;
				top: 0.1rem;
				color: #666;
			}

			.list-item .bottom {
				display: block;
				font-size: 12px;
				position: absolute;
				right: 5px;
				top: 2rem;
				color: #666;
			}

			.list-item .center {
				display: block;
				font-size: 12px;
				position: absolute;
				left: 40%;
				top: 2rem;
				color: #666;
			}

			.list-item .delete {
				width: 4rem;
				height: 4rem;
				/* padding: 0.2rem; */
				background: #ff4949;
				font-size: 12px;
				color: #fff;
				text-align: center;
				line-height: 4rem;
				position: absolute;
				top: 0;
				right: -4rem;
			}

			.list-item .edit {
				width: 4rem;
				height: 4rem;
				/* padding: 0.2rem; */
				background: #00aaff;
				font-size: 12px;
				color: #fff;
				text-align: center;
				line-height: 4rem;
				position: absolute;
				top: 0;
				right: -8rem;
			}

			.cur {
				background-color: #e5ecff;
			}

			.aa {
				/* cursor: pointer; */
				border: 1px solid #C0C0C0;
			}

			.red {
				background-color: #C0C0C0;
				color: red;
			}

			.idx {
				position: absolute;
				/* left: 5px; */
				top: 50%;
				margin-top: -10px;
				width: 22px;
				height: 22px;
				text-align: center;
				font-size: 1rem;
				line-height: 22px;
				background: #239AFF;
				color: #FFF;
				border-radius: 100%;
			}