uniapp uView现实左滑删除,收藏效果

1.效果图

 2.可以直接复制运行看效果（排版可以根据自己需求修改）

<template>
	<view class="content">
		<u-swipe-action
					bg-color="rgb(250, 250, 250)"
					@open="open"
					:disabled="disabled"
					:index="index"
					v-for="(item, index) in addressList"
					:key="item.id"
					:show="item.show"
					@click="click"
					:btn-width="btnWidth"
					@close="close"
					:options="options"
					@content-click="contentClick"
				>
				<view style="display:flex">
                   <view class="wrapper">
			        	<view class="address-box">
			        		<text v-if="item.is_default" class="tag">默认</text>
			        		<text class="address">{{item.address}}</text>
			        	</view>
			        	<view class="u-box">
			        		<text class="name">{{item.name}}</text>
			        		<text class="mobile">{{item.phone}}</text>
			        	</view>
			      </view>
			      <view style="padding-right:20rpx;margin-top:20rpx"><text class="yticon icon-bianji" @click.stop="addAddress('edit', item)"></text></view>
		      </view>
		</u-swipe-action>
		<view v-if="addressList.length==0">
			<u-empty text="暂无地址" mode="address" font-size="40" margin-top="60"></u-empty>
		</view>
		
		<button class="add-btn" @click="addAddress('add')">新增地址</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				source: 0,
				addressList: [{
					id: 1,
					is_default: 1,
					name: "测试1",
					address: '测试地址111111111111',
					phone: '1501659541',
					show: false
				},
				{
					id: 2,
					is_default: 0,
					name: "测试2",
					address: '测试地址22222222222222',
					phone: '1501659541',
					show: false
				},
				{
					id: 3,
					is_default: 0,
					name: "测试3",
					address: '测试地址3333333333333333',
					phone: '1501659541',
					show: false,
				}],
				ddisabled: false,
		    	btnWidth: 180,
		    	show: false,
		       	options: [
		     		{
					text: '收藏',
					style: {
						backgroundColor: '#007aff'
					  }
				   },
					{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
		     	]
			}
		},
		onLoad(option){
			this.source = option.source;
			this.getData()
		},
		methods: {
		    disabledChange(index) {
	     		this.disabled = index == 0 ? true : false;
	     	},
	     	showChange(index) {
	     		if (index == 0) {
	     			this.addressList.map((val, ids) => {
	     				if (ids != 0) val.show = false;
	     				else val.show = true;
	     			});
	     		} else {
	     			this.addressList[0].show = false;
	     		}
	     	},
	     	click(index, index1) {
	     		if(index1 == 1) {
	     			this.addressList.splice(index, 1);
	     			this.$u.toast(`删除了第${index}个cell`);
	     		} else {
	     			this.addressList[index].show = false;
	     			this.$u.toast(`收藏成功`);
	     		}
	     	},
	     	open(index) {
	     		this.addressList[index].show = true;
	     		this.addressList.map((val, idx) => {
	     			if (index != idx) this.addressList[idx].show = false;
	     		});
	     	},
	     	close(index) {
	     		this.addressList[index].show = false;
	     	},
	     	contentClick(index) {
	     		// console.log(index);
	     	},
			getData(){
							
				
			},
			//选择地址
			checkAddress(item){
				
				
			},
			addAddress(type, item){
			
				
			},
			
			refreshList(data, type){
				
			}
		}
	}
</script>

<style lang='scss'>
	page{
		padding-bottom: 120upx;
	}
	.content{
		position: relative;
	}
	.list{
		display: flex;
		align-items: center;
		padding: 20upx 30upx;;
		background: #fff;
		position: relative;
	}
	.wrapper{
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 15rpx;
	}
	.address-box{
		display: flex;
		align-items: center;
		.tag{
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}
		.address{
			font-size: 30upx;
			color: $font-color-dark;
		}
	}
	.u-box{
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;
		.name{
			margin-right: 30upx;
		}
	}
	.icon-bianji{
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}
	
	.add-btn{
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);		
	}
	.u-swipe-action{
		border-bottom: 2rpx solid rgb(227, 226, 226) !important;
		background-color: white !important;
	}
</style>