uniapp列表左滑删除

最新推荐文章于 2025-05-07 16:47:58 发布

十友九

最新推荐文章于 2025-05-07 16:47:58 发布

阅读量1.3k

点赞数 9

CC 4.0 BY-SA版权

文章标签： uni-app javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43778556/article/details/134804986

文章描述了一个使用Vue.js编写的组件，演示了如何通过触摸事件实现商品列表中的滑动选择和删除功能，包括触摸开始、移动和结束时的处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="container">
		<view class="item-all" @click.stop="change(item,index)" v-for="(item,index) in list" :key="index"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd(index)">
			<view class="item">
				<view class="item-left">
					<image class="img" src="../static/logo.png"></image>
				</view>
				<view class="item-ri">
					<view class="item-text4">
						<text>品名：</text>
						<text>商品编码：</text>
					</view>
					<view>
						<text class="item-text2">起批量：</text>
						<text class="item-text2">交期：</text>
						<text class="item-text3">￥43</text>
					</view>
				</view>
			</view>
			<view class="del" :class="{ hide: !item.select }">
				<image @click.stop="handleDel(index)" src="../static/images/del.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "w-list",
		props: {
			isDel: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				list: [{
						select: false
					},
					{
						select: false
					},
					{
						select: false
					},
					{
						select: false
					},
				],
				sleb: 0,
				timer: null,
				index: 0,

			};
		},
		methods: {
			touchStart(e) {
				// console.log(e);
				console.log('获取焦点', e.touches[0].clientX);
				this.sleb = e.touches[0].clientX;
			},
			touchMove(e) {
				this.timer = setTimeout(() => {
					// 排它
					this.list.forEach(item => {
						item.select = false;
					})
					const delTax = e.touches[0].clientX - this.sleb;
					if (delTax < -10) {
						// 向左滑动
						console.log("向左滑动", delTax);
						this.list[this.index].select = true;
					} else if (delTax > 10) {
						// 向右滑动
						console.log("向右滑动", delTax);
						this.list[this.index].select = false;
					}
				}, 300);
			},
			// 获取索引index
			touchEnd(i) {
				console.log('获取索引', i);
				this.index = i;
			},
			// 删除
			handleDel(i) {
				console.log("删除", i);
				this.list[i].select = false
			}
		}
	}
</script>

<style scoped>
	.hide {
		display: none;
	}

	.container {
		padding: 20rpx;
		box-sizing: border-box;
		padding-bottom: 110rpx;
		background-color: #fff;
	}

	.item-all {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20rpx;
	}

	.select {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.select-img {
		width: 40rpx;
		height: 40rpx;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		box-shadow: 0px 0px 5px #b8b6b7;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		width: 100% !important;
		height: 100% !important;

	}

	.item-left {}

	.img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.item-ri {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		margin-left: 20rpx;
	}

	.item-text1 {
		font-size: 30rpx;
		font-weight: bold;
	}

	.item-text2 {
		font-size: 27rpx;
	}

	.item-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.item-text3 {
		color: #ff0000;
	}

	.item-text4 {
		border-bottom: 1px solid #EDEDED;
		width: 100%;
		height: 100%;
		font-size: 30rpx;
	}

	.del {
		width: 80rpx;
		margin-left: 10rpx;
	}

	.del image {
		width: 60rpx;
		height: 60rpx;
	}
</style>