样式集（10） - 滑动删除功能实现，VUE完整源码附效果图

怼烎@ 2022-10-09 00:39 116阅读 0赞

先看效果图

![20210622182521405.gif][]

实现方式：

使用 scroll-view 标签，进行横向滑动，达到左滑出现删除按钮，

注：如果不是使用uni-app或者小程序框架，没有 scroll-view 组件的话可以通过CSS实现哦

下面看uni-app的实现代码：

<template>
    	<view class="page">
    		<view class="centent">
    			<view class="tabs p_r">
    				<view class="tabItem" @click="tabIdx=index" :class="tabIdx==index?'tabItemOn':''"
    					v-for="(item,index) in tabs">
    					{
       {item}}
    					<view v-if="tabIdx==index" class="tabItemOnX">
    					</view>
    				</view>
    			</view>
    
    			<view class="list">
    				<view v-for="(item,index) in lists">
    					<scroll-view class="listItem " scroll-x="true">
    						<view class="scroll-view">
    						<view class="itemCentent" @touchend="touchend" @touchstart="touchstart"
    							:class="listIdx==index?'listItemOn':''">
    							<view class="p_r">
    								<image class="listItIcon" :src="listItIcon" mode=""></image>
    								<view class="listItTxt">
    									{
       {item}}
    								</view>
    								<img class="rrr" :src="r_2" />
    							</view>
    							<view class="icons p_r">
    								<image class="zan_1" :src="zan_1"></image>
    								<view class="mun">
    									5
    								</view>
    								<image class="see_2" :src="see_2"></image>
    								<view class="mun">
    									5
    								</view>
    							</view>
    						</view>
    						<view class="delete">
    							删除
    						</view>
    						</view>
    					</scroll-view>
    				</view>
    			</view>
    		</view>
    		<FaqTabbar @changeTab="changeTab"></FaqTabbar>
    	</view>
    </template>
    
    <script>
    	import Search from './components/search.vue';
    	import faqTabbar from './components/faqTabbar.vue';
    	export default {
    		components: {
    			Search,
    			faqTabbar
    		},
    		data() {
    			return {
    				tabs: [],
    				tabIdx: 0,
    				listIdx: 0,
    				touchS: '',
    				touchN: '',
    				img_r_1: this.$FAQ_PATH + 'r_1.png',
    				img_r_3: this.$FAQ_PATH + 'r_3.png',
    				zan_1: this.$FAQ_PATH + 'zan_1.png',
    				zan_2: this.$FAQ_PATH + 'zan_2.png',
    				see_2: this.$FAQ_PATH + 'see_2.png',
    				listItIcon: this.$FAQ_PATH + 'ask.png',
    				collection: this.$FAQ_PATH + 'collection.png',
    				r_2: this.$FAQ_PATH + 'r_2.png',
    				lists: [],
    			};
    		},
    		onLoad(option) {
    			this.$common.Init.call(this);
    			var tabs = ['综合', '疫苗政策', '特殊人群', '接种程序', '不良反应']
    			this.tabs = tabs;
    
    			var lists = ['2021版国家免疫规划中关于放宽补种限制 变化如何？', '脊灰疫苗免疫程序有什么变化？', '麻腮风疫苗免疫程序有什么变化？']
    			this.lists = lists
    		},
    
    		methods: {
    			touchstart(e) {
    				this.touchS = e.changedTouches[0].pageX
    			},
    			touchend(e) {
    				let start = this.touchS
    				let end = e.changedTouches[0].pageX
    
    				console.log(start)
    				console.log(end)
    				if (start < end - 50) {
    					console.log('右滑')
    
    
    				} else if (start > end + 50) {
    					console.log('左滑')
    
    				}
    			},
    		},
    	}
    </script>
    
    <style lang="scss" scoped>
    	.page {
    		width: 100vw;
    		height: 100vh;
    		background-color: #F4F4F4;
    		padding: 110rpx 0;
    	}
    
    	.list {
    		margin-top: 20rpx;
    
    		.listItem {
    			width: 100%;
    			height: 160rpx;
    			margin-bottom: 10rpx;
    			.scroll-view{
    				width: 125%;
    				display: flex;
    				flex-direction: row;
    			}
    			.delete {
    				width: 24%;
    				height: 160rpx;
    				line-height: 160rpx;
    				background-color: #c19a35;
    				position: relative;
    				color: #fff;
    				text-align: center;
    				border-radius: 10rpx 0 0 10rpx;
    				left: 1%;
    			}
    
    			.itemCentent {
    				width: 100%;
    				font-size: 26rpx;
    				font-family: Source Han Sans CN;
    				font-weight: 400;
    				color: #492845;
    				position: relative;
    				background-color: #fff;
    				margin-bottom: 14rpx;
    				height: 160rpx;
    			}
    
    
    			.icons {
    				position: relative;
    				left: 498rpx;
    				width: 160rpx;
    				top: 24rpx;
    
    				.zan_1 {
    					width: 22rpx;
    					height: 20rpx;
    					margin-right: 4rpx;
    				}
    
    				.see_2 {
    					width: 26rpx;
    					height: 20rpx;
    					margin-left: 60rpx;
    				}
    
    				.mun {
    					margin-top: -12rpx;
    					margin-left: 6rpx;
    					color: #9C9C9C;
    				}
    			}
    
    			.rrr {
    				width: 12rpx;
    				height: 22rpx;
    				position: absolute;
    				left: 670rpx;
    				margin-top: 40rpx;
    				// transform: rotate(135deg); 
    			}
    
    			.listItIcon {
    				width: 34rpx;
    				height: 34rpx;
    				margin-left: 60rpx;
    				margin-top: 40rpx;
    			}
    
    			.listItTxt {
    				margin-left: 20rpx;
    				margin-top: 24rpx;
    				max-width: 506rpx;
    			}
    		}
    	}
    
    	.tabs {
    		justify-content: space-around;
    		margin-top: 26rpx;
    		width: 94vw;
    		padding: 0 3vw 8rpx 3vw;
    		border-bottom: 1rpx solid #d0d0d0;
    
    		.tabItem {
    			font-size: 26rpx;
    			font-family: Source Han Sans CN;
    			font-weight: 400;
    			color: #492845;
    			position: relative;
    			justify-content: center;
    			display: -webkit-flex;
    		}
    
    		.tabItemOn {
    			font-size: 30rpx;
    			font-family: Source Han Sans CN;
    			font-weight: 500;
    			color: #492845;
    		}
    
    		.tabItemOnX {
    			width: 40rpx;
    			height: 4rpx;
    			position: absolute;
    			margin: auto;
    			top: 50rpx;
    			background-color: #C19A35;
    		}
    	}
    </style>

[20210622182521405.gif]: /images/20221005/9e115a28d41f4523a22360ff4b09aeb4.png