uniapp开发小程序-显示左滑删除效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp开发小程序-显示左滑删除效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、效果图：

uniapp 左滑删除,uni-app,小程序,数学建模文章来源地址https://www.toymoban.com/news/detail-614291.html

二、代码实现：

<template>
	<view class="container">
		<view class="myorderList">
			<uni-swipe-action>
				<uni-swipe-action-item class="swipe-action-item" :right-options="options" @click="bindClick"
					@change="swipeChange($event, index)" v-for="(item,index) in myorderList">
					<view class="list_item">
						<image class="orderImg" :src="item.imgurl"></image>
						<view class="item_right">
							<view class="">文件名：{{item.name}}</view>
							<view class="">打印页数：{{item.pages}}</view>
							<view class="btn" @click="seleGuige">选规格</view>
							<view class="numbox">
								<uni-number-box :min="0" :value="item.num" @change="bindChange" />
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myorderList: [{
						name: '承诺书',
						imgurl: '../../static/images/contact_ht@2x.png',
						pages: 10,
						num: 1
					},
					{
						name: '企业画册',
						imgurl: '../../static/images/contact_ht@2x.png',
						pages: 1,
						num: 2
					},
					{
						name: '承诺书',
						imgurl: '../../static/images/contact_ht@2x.png',
						pages: 10,
						num: 1
					},
				],
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#B4B4B4',
						color: '#fff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#1CCD7F',
						color: '#fff'
					}
				}],
				
			}
		},
		methods: {
			
			bindClick(e) {
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			},
			bindChange(value) {
				console.log('返回数值：', value);
			},
			
		}

	}
</script>
<style lang="scss" scoped>

	//去掉自定义组件里的图标
	/deep/ .header .left image {
		display: none !important;
	}
	.container {
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.myorderList {
		margin-top: 40rpx;
	}

	.swipe-action-item {
		width: 690rpx;
		height: 260rpx;

		.list_item {
			width: 100%;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(34, 23, 20, 0.08);
			border-radius: 20rpx;
			margin-bottom: 34rpx;
			box-sizing: border-box;
			padding: 30rpx 24rpx 30rpx 30rpx;
			display: flex;
			font-size: 26rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #333333;

			.orderImg {
				width: 155rpx;
				height: 200rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				border: 2rpx solid #20A746;
				margin-right: 32rpx;
			}

			.item_right {
				height: 100%;
				box-sizing: border-box;
				width: 450rpx;

				view {
					margin-top: 15rpx;
				}

				.numbox {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.btn {
					width: 150rpx;
					height: 43rpx;
					background: #1CCD7F;
					border-radius: 20rpx;
					font-size: 26rpx;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>