MoeNovaClient/uni_modules/next-swipe-action

next-swipe-action适用于uni-app项目的滑动操作、左滑删除、滑动删除组件

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

遇到问题或有建议可以加入QQ群(455948571)反馈;
如果觉得组件不错，给五星鼓励鼓励咯;

如果有使用问题请加群

注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合； 点击链接加入群聊前端开发（uniapp插件）】

vue3使用示例

<template>
	<view class="container">
		<view class="title"><text>next-swipe-action 演示demo</text></view>
		<view class="list" v-for="(item,index) in list" :key="index">
			<next-swipe-action :btnGroup="btnGroup" :disabled="index===2 || index===4" :index="index" @btnClick="onclick">
				<view class="item">
					<image class="item-img" src="https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
					</image>
					<view class="item-name">{{item}}</view>
				</view>
			</next-swipe-action>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'

	const list = ref(['李先生','张小姐','武sir-禁用','黎先生','刘sir-禁用','欧阳小姐'])
	const btnGroup = ref([
		{
			name: '修改',
			action: 'edit',
			style: {
				bgColor: '#f9ae3d'
			}
		},
		{
			name: '删除',
			action: 'del',
			style: {
				bgColor: '#ff4d4f'
			}
		},
		{
			name: '审核',
			action: 'audit',
			style: {
				bgColor: '#b7eb8f'
			}
		},
	]);
	//点击操作回调事件
	function onclick(e) {
		console.log('所点击的列表索引：' , e.index)
		console.log('所点击的按钮数据：' , e.item)
	}
</script>
<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
	}
	.title {
		color: #666;
		padding: 30rpx;
		
	}
	.list {
		width: 100%;
		margin-top: 1px;
	}

	.item {
		width: 100%;
		height: 120rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

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

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

属性说明

名称	类型	默认值	描述
index	Number	0	当前列索引
disabled	Boolean	false	是否禁用左滑
btnGroup	Array	默认显示编辑、删除	操作按钮数组信息，默认显示编辑、删除，可自定义传入
btnClickAutoReset	Boolean	true	按钮点击后是否重置

Event 事件

事件名	说明	类型	回调参数
btnClick	自定义按钮点击事件	emit	Object