uniapp 微信小程序长按实现删除

uniapp yekong

uniapp 微信小程序需要实现长按删除,记录一下

代码

<template>
	<view class="listitem" @click="goadd(item)" @longpress="deleteInfoConfirm(item)">
		<div class="listiteml">
			<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/driver/icon_car.png" mode="">
			</image>
			<text>{{item.FleetName}}</text>
		</div>
		<div class="listitemr">
			<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_right.png"
				mode="widthFix"></image>
		</div>
	</view>
</template>

<script>
	import {
		CarMainerReMoveFleet
	} from '@/config/api.js'
	export default {
		components: {},
		data() {
			return {
				CompanyId: 0,
				style: {
					// 字符串的形式
					p: 'font-size:28rpx;',
					span: 'font-size: 28rpx;',
				},
				show: false
			}
		},
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		computed: {

		},
		mounted() {
			this.AccountId = JSON.parse(uni.getStorageSync('userData')).Id
		},
		methods: {
			goadd(item) {
				uni.setStorageSync('fleetManagementData', item)
				uni.navigateTo({
					url: '/pages/owner/fleetManagement/add/add'
				})
			},
			deleteInfo(item) {
				var that = this;
				CarMainerGetFleetCars({
					params: {
						FleetId: item.Id,
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						that.$emit('getdata', 0)
					}
				}).catch(err => {

				})
			},
			deleteInfoConfirm(item) {
				var that = this;
				uni.showModal({
					title: '提示',
					confirmText: '删除',
					cancelText: '取消',
					content: '确定要删除吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.deleteInfo(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.listitem {
		width: 694rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;

		.listiteml {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #151852;
			}

			image {
				width: 56rpx;
				height: 56rpx;
				margin-left: 32rpx;
				margin-right: 22rpx;
			}
		}

		.listitemr {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			margin-right: 32rpx;
			align-content: flex-start;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>

喜欢