care365/components/left-slide-operation/left-slide-operation.vue

<!-- 向左滑动 右边出现操作按钮 -->
<template>
	<view class="wrapper">
		<view :style="[Tactive == index ? leftStyle : '']" class="item-view" @touchstart="touchStart($event, index)"
			@touchmove="touchMove($event, index)" @touchend="touchEnd($event, index)"
			@click="itemClick(itemData, index)">
			<slot></slot>
		</view>

		<view :style="[Tactive === index ? rightStyle : '']" class="s-btn-box">
			<view class="s-btn" @click.stop="editoperation(itemData)"><text class="iconfont icon-edit"></text></view>

			<view class="s-btn s-btn-red" @click.stop="deleteoperation(itemData)"><text class="iconfont icon-trashcan"></text></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// item 数据
			itemData: {},

			// item 下标
			index: {
				type: Number,
				default: 0
			},
			// 是否允许滑动
			isSlide: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				startX: null, //起始位置
				startM: null,
				startE: null, //结束位置
				left: null,
				deleteBtn: 240,
				leftStyle: {},
				rightStyle: {},
				Tactive: 0
			};
		},
		methods: {
			editoperation(item) {
				this.init();
				this.$emit('operationCallBack', {
					item: item,
					action: "edit"
				});
			},
			deleteoperation(item) {
				this.init();
				this.$emit('operationCallBack', {
					item: item,
					action: "remove"
				});
			},

			itemClick(item, index) {
				this.leftStyle = {};
				this.rightStyle = {};
				var lastIndex = uni.getStorageSync('lastSlideIndex');
				this.$emit('itemClickCallBack', {
					lastSlideIndex: lastIndex,
					index: index,
					item: this.itemData
				});
			},

			init() {
				this.leftStyle = {};
				this.rightStyle = {};
			},

			touchStart(e, index) {
				if (!this.isSlide) {
					//不允许滑动
					return;
				}
				this.Tactive = index;
				this.startX = e.touches[0].clientX;
				var lastIndex = uni.getStorageSync('lastSlideIndex');
				this.$emit('itemTouchStart', {
					lastSlideIndex: lastIndex,
					item: this.itemData
				});
			},
			touchMove(e, index) {
				if (!this.isSlide) {
					//不允许滑动
					return;
				}
				this.startM = e.touches[0].clientX;
				this.left = this.startM - this.startX;
				if (this.left > this.deleteBtn) {
					//右滑     注意: 这里的100,是与删除div的width保持一致;
					// this.left = this.deleteBtn; //转成正数
					// this.left = 0;
				}

				//左滑
				if (this.left < -this.deleteBtn) {
					this.left = -this.deleteBtn; //转成正数
					this.rightStyle = {
						left: this.left + 'px'
					};
					var temp = this.deleteBtn + this.left;
					this.leftStyle = {
						left: temp + 'px'
					};
				}
			},
			touchEnd(e, index) {
				if (!this.isSlide) {
					//不允许滑动
					return;
				}
				if (this.left < this.deleteBtn) {
					//鼠标松开时, 如果长度小于.delete的width;
					this.left = -240;
					this.leftStyle = {
						left: this.left + 'rpx'
					};
					var temp = 0;
					this.rightStyle = {
						right: temp + 'px'
					};
					uni.setStorageSync('lastSlideIndex', index);
					this.$emit('itemTouchEnd', {
						index: index,
						item: this.itemData
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 170rpx;
		font-size: 14px;
		overflow: hidden;
		display: flex;
		position: relative;

		.item-view {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			/* padding: 0 30rpx; */
			width: 100%;
			height: 100%;
			background: #fff;
			color: black;
			position: absolute;
			left: 0;
			z-index: 3;
			transition: all 0.5s;
		}

		.s-btn-box {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0px;
			// width: 200rpx;
			width: 240rpx;
			height: 100%;
			background: #ffffff;
			color: #fff;
			text-align: end;
			transition: all 0.5s;
		}

		.s-btn {
			width: 120rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #CCCCCC;
		}

		.s-btn .iconfont {
			font-size: 42rpx;
			color: #FFFFFF;
		}

		.s-btn-red {
			background: #ED4242;
		}
	}
</style>