uniapp 滑动删除

手机端项目    卡片滑动删除  比如代办卡片  银行卡等   没有用单选框之类的那种删除   而是采用了滑动删除   

template 

// 循环卡片列表 

    //滑动 删除的组件
	
        // 卡片上的详细信息
		
		    {{item.name}}
		    {{ntext}} | {{item.names}}
		    {{item.number}}
	    
	

js

css 

.bank {
	    width: 93%;
		height: 250upx;
		background: url('../../../static/bgb.png');
		background-size: 100% 100%;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 16upx 40upx;
		justify-content: space-around;

		text {
			color: white;
		}
		text:nth-of-type(1) {
			font-size: 40upx;
		}
		text:nth-of-type(2) {
			font-size: 30upx;
		}
		text:nth-of-type(3) {
			font-size: 38upx;
		}
	}

	.banks {
		width: 90%;
		height: 250upx;
		margin: 20upx 40upx 0upx 40upx;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: space-around;
	}

uni-swipe-action.vue

需要改组件自带的样式   根据需要自主修改

.uni-swipe {
    overflow: hidden;
		width:330px;  // 自己添加的样式 
}
.uni-swipe_box {
    // 原来的样式 不动
	// 添加的
		font-size: 14px;
		height: 125px;
}
.uni-swipe_button {
	// 原来的 不动 
    // 添加的 
	padding: 0 20px;
}