uniapp uni-swipe-action 滑动删除

最新推荐文章于 2025-11-07 16:57:10 发布

原创最新推荐文章于 2025-11-07 16:57:10 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #微信小程序

本文介绍了如何在HBuilderX中通过插件市场引入uni-swipe-action组件，创建一个带有滑动操作栏的设施列表。在列表项上，用户可以执行删除、编辑和设置消杀任务等操作。点击房间时，滑动操作栏会显示或隐藏，提供了友好的用户交互体验。

HBuilderX 插件市场直接搜 uni-swipe-action 导入项目即可

<!-- 设施列表 -->
<view class="room-c" v-for="(item, index) in facilitiesList" :key="index" @click="onRoom(item)">
	<uni-swipe-action>
		<uni-swipe-action-item :right-options="options" @click="onDelete(item.id)" :show="item.isOpened" :auto-close="false">
			<view class="room-t">
				<view style="display: flex;">
					<view class="room-img">
						<image @click="onRoomFun(item.id)" src="@/static/device/room.png"</image>
					</view>
					<view class="room-title">{{ item.name }}</view>
				</view>
				<view style="display: flex;">
					<view class="room_icon">
						<view class="arrow-right" @click="onlowerLevels(item.id)">
							<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="room-b">
				<view class="room_delete" @click.stop="setOpened(item)">
					<image src="@/static/images/delete_icon.png"></image>
				</view>
				<view class="room_edit" @click="oneditBuilding(item)">编辑
					<u-icon name="edit-pen" color="#fff" size="28" style="margin-left: 10rpx;"></u-icon>
				</view>
				<view style="flex: 1;">
					<view class="room_timing" @click="onTiming(item.id)">消杀任务
					</view>
				</view>
			</view>
		</uni-swipe-action-item>
	</uni-swipe-action>
</view>

export default {
	data() {
		return {
			facilitiesList: [],
			options: [{
				text: '删除',
				style: {
					backgroundColor: '#EE2437' // 删除按钮背景  红的
				}
			}],
		};
	},
	methods: {
		onRoom(item) {
			this.$set(item, 'isOpened', 'none');
			console.log("消失", item)
		},
	    setOpened(item) {
			if (item.isOpened == "right") {
				this.$set(item, 'isOpened', 'none');
				console.log("消失", item)
			} else {
				this.$set(item, 'isOpened', 'right');
				console.log("出来", item)
			}
		},
		// 删除基础设施
		onDelete: throttle(function(id) {
			//api接口
		}),
	}
}