一个横向滑动列表demo（向右边出现删除图标）

<template>
	<view>
		<view v-for="(item,index) in [1,2,3,4]"
		:key="index"
		 class="content"
		 :class="[(current == index) && hehe ? 'ani' : '']"
		 @touchstart="starttouch($event,index)"
		 @touchend="endtouch($event,index)"
		>
		 
		 
		 
		 <view class="delimg" @click="delclick(index)">
		 	<image src="../../../static/del.png" mode="widthFix"></image>
		 </view>	
		</view>

	</view>
</template>

<script>
	
	export default {
		name:'leftslide',
		data() {
			return {
				current:-1,
				hehe:true,
				startpoint:0,
				endpoint:0
				
			}
		},
		methods: {
			starttouch(res,e){
				// console.log(res.changedTouches[0].pageX)
				this.startpoint = res.changedTouches[0].pageX;
				console.log("开始》》》",this.startpoint)
				
			},
			endtouch(res,e){
				this.endpoint = res.changedTouches[0].pageX;
				console.log("结束》》》",this.endpoint)
				if(this.endpoint > this.startpoint){
					// console.log("右边")
					this.hehe = false;
				}else if(this.endpoint < this.startpoint){
					// console.log("左边")
					this.hehe = true;
					this.current = e;
				}
			},
			delclick(e){
				console.log(e)
			}

			
		}
	}
</script>

<style scoped>
	.content{
		width: 690upx;
		height: 260upx;
		background-color:rgba(255,255,255,1);
		margin: 20upx auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		
	}
	.ani{
		transform: translateX(-100upx);
	}
	.delimg{
		position: relative;
		right:-100upx;
		
		width: 48upx;
		height: 48upx;

		
		
	}
	.delimg image{
		width: 100%;
		height: 100%;
	}


</style>