uni-app开发——实现左滑喜欢，右滑讨厌功能

uni-app开发——实现左滑喜欢，右滑讨厌

• 布局和js代码（可直接复制执行）
• 样式表
• 效果图

啥也不说了，咱就直接上代码吧！功能还不是很齐全，所以仅供参考。。。。。
详细代码地址：uni_app_demo。

布局和js代码（可直接复制执行）

<template>
	<view class="container">
		<view class="swiper_wrap">
			<view class="swiper_item" v-for="(item,index) in swiper_data" :style="{zIndex:(5-index)}" :data-id='index'   :key="index" :animation="item.anim"  @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
				<image class="swiper_item_image" :src="item.img"></image>
				<!-- 喜欢按钮 -->
				<view class="swiper_item_type swiper_item_type_like" :style="{display:item.like_state ==-1?'block':'none'}">
					<image  src="../../static/images/like1.png" mode=""></image>
				</view>
				<!-- 不喜欢按钮 -->
				<view class="swiper_item_type swiper_item_type_dislike" :style="{display:item.like_state ==1?'block':'none'}">
					<image src="../../static/images/dislike1.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {  },
	data() {
		return {
			startX: 0, //滑动开始x轴位置
			startY: 0, //滑动开始y轴位置
			moveX: 0, //滑动的x轴距离
			moveY: 0, //滑动的y轴距离
			like_state:0,//-1：左滑，0：没滑动，1：右滑
			currentIndex:-1,//当前滑动的卡片index
			skewDeg:0,//当前滑动卡片的倾斜度
			swiper_data:[
				{
					img:"../../static/images/swiper_img/swiper1.jpg",
					anim:null,
					like_state:0
				},
				{
					img:"../../static/images/swiper_img/swiper2.jpg",
					anim:null,
					like_state:0
				},
				{
					img:"../../static/images/swiper_img/swiper3.jpg",
					anim:null,
					like_state:0
				},
				{
					img:"../../static/images/swiper_img/swiper4.jpg",
					anim:null,
					like_state:0
				},
				{
					img:"../../static/images/swiper_img/swiper5.jpg",
					anim:null,
					like_state:0
				}
			]
		};
	},
	onLoad() {},

	methods: {
		/**
		 * 触摸开始：记录位置
		 * */
		touchStart (event) {
			this.startX = event.touches[0].pageX;
			this.startY = event.touches[0].pageY;
		},
		/**
		 * 触摸开始滑动
		 * */
		touchMove (event) {
			var currentX = event.touches[0].pageX;
			var currentY = event.touches[0].pageY;
			var moveX = currentX - this.startX;
			var moveY = currentY - this.startY;
			var text = '';
			var currentIndex=event.currentTarget.dataset.id;
			var state=0;//-1：左滑，0：没滑动，1：右滑
			// //左右方向滑动
			if (Math.abs(moveX) > Math.abs(moveY)) {
				if (moveX < -10) {
					text = '左滑';
					state=-1;
				} else if (moveX > 10) {
					text = '右滑';
					state=1;
				}
				this.skew(currentIndex,moveX,moveY);
			}else {//上下方向滑动
				if (moveY < 0) text = '上滑';
				else if (moveY > 0) text = '下滑';
			}
			this.swiper_data[currentIndex]['text']=text;
			this.swiper_data[currentIndex]['like_state']=state;
			this.like_state=state;
			this.currentIndex=currentIndex;
			this.moveX = moveX;
			this.moveY = moveY;
		},
		/**
		 * 触摸结束
		 * */
		touchEnd (event) {
			// console.log(`移动距离:${Math.abs(this.moveX)}`)
			if(Math.abs(this.moveX)>60){
				this.hidden();
			}else{
				var anim = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease-in-out'
				});
				anim.rotate(0)
				.step(1000);
				this.swiper_data[this.currentIndex]['anim']=anim.export();
				this.swiper_data[this.currentIndex]['like_state']=0;
			}
		},
		/**
		 * 触摸卡片倾斜
		 * */
		skew (index,moveX,moveY){
			let that = this;
			var anim = uni.createAnimation({
				duration: 500,
				timingFunction: 'linear'
			});
			this.swiper_data[index]['anim']=anim;
			if(Math.abs(moveX)<180){
				this.skewDeg
				//console.log(`角度：${this.skewDeg}`)
				this.skewDeg=moveX/4;
				anim.rotate(this.skewDeg)
					.step(1000);
				this.swiper_data[index]['anim']=anim.export();
			}
		},
		/**
		 * 触摸结束，卡片消失
		 * */
		hidden (){
			var anim = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease-in-out'
			});
			if(this.like_state==-1){
				anim.translate(-400, -400)
			}else if(this.like_state==1){
				anim.translate(400, -400)
			}
			// console.log(`角度：${this.skewDeg}`)
			anim.rotate(this.skewDeg)
				.opacity(0)
				.step(1000);
			this.swiper_data[this.currentIndex]['anim']=anim.export();
		}
	},
};
</script>

<style lang="less" scoped>
	@import './index.css';
</style>

样式表

.container {
	background-color: #F0F0F0;
	width: 100%;
	height: 100%;

}

.swiper_wrap {
	width: 100%;
	height: 100%;
	position: relative;
	justify-content: center;
	align-items: center;
	overflow: hidden;

}

.swiper_item {
	width: 300px;
	height: 500px;
	border-radius: 10px;
	background: #FFFFFF;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -250px;

}

.swiper_item_image {
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

.swiper_item_text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 30px;
	color: #4CD964;
}

.swiper_item_type {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #d81e06;
	position: absolute;
	top: 20px;

}

.swiper_item_type image {
	width: 22px;
	height: 22px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.swiper_item_type_like {
	left: 20px;
}

.swiper_item_type_dislike {
	right: 20px
}

效果图

来源：CSDN

作者：辣辣的草莓酱

链接：https://blog.csdn.net/weixin_38233549/article/details/103854143