OA/uni_modules/liu-swipe-action

liu-watermark适用于uni-app项目的滑动操作、左滑删除、滑动删除组件

本组件目前兼容微信小程序、H5

本组件是简单好用的滑动操作、左滑删除、滑动删除组件，可自定义样式，源码简单易修改

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

使用示例

<template>
	<view class="slide-main">
		<view class="list" v-for="(item,index) in list" :key="index">
			<liu-swipe-action :index="index" @clickItem="clickItem">
				<view class="item">
					<image class="item-img" src="https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png">
					</image>
					<view class="item-name">{{item}}</view>
				</view>
			</liu-swipe-action>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['第1条', '第2条', '第3条', '第4条', '第5条', '第6条']
			}
		},
		methods: {
			//点击操作回调事件
			clickItem(e) {
				console.log('所点击的列表索引：' + e.index)
				console.log('所点击的按钮id：' + e.id)
			}
		}
	}
</script>

<style scoped>
	.slide-main {
		width: 100%;
		height: 100vh;
		background-color: #f0f0f0;
	}

	.list {
		width: 100%;
		margin-top: 1px;
	}

	.item {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.item-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-left: 28rpx;
	}

	.item-name {
		margin-left: 16rpx;
		font-size: 30rpx;
		color: #666666;
	}
</style>

如需图文水印可自行修改组件内容

属性说明

名称	类型	默认值	描述
index	Number	0	当前列索引
disable	Boolean	false	是否禁用左滑
btnList	Array	默认显示编辑、删除	操作按钮数组信息，默认显示编辑、删除，可自定义传入
@clickItem	Function		点击操作回调事件(返回当前列id和操作按钮id)