uniapp一键翻卡牌 小程序appH5都支持

1.在components目录下 新建 zhuxichong-flipCard目录再建一个同名vue文件

zhuxichong-flipCard.vue

<template>
	<view class="" style="width: 100%;">
		<view class="fatherCard" :style=" cardWardData.length == 1?'justify-content: center;':'' ">
			<view class="card" :style=" cardWardData.length == 1?'margin-left:0':'' " v-for="(item,i) in cardWardData" :key="i">
				<view class="card__content" :class=" item.isStartChangeCard? item.level ==1 ?'linghtType2' :'linghtType3'  : 'linghtType1' " :style=" item.isStartChangeCard? 'transform: rotateY(180deg)' :'transform: rotateY(0deg)'">
					<view class="card__front" >
						<image style="width: 100%;height: 100%;"  src="../../static/noward.png"></image>
					</view>
					<view class="card__back">
						<view style="width: 100%;height: 100%;overflow: hidden;border-radius: 20upx;" class="">
							<image style="width: 100%;border-radius: 20upx;" :src="item.wardImg" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default { 
		props:{
			
		},
		name:"drawcard",
		data() {
			return {
				idIndex:0,
				dataLen:0,
				cardWardData:[
					{
						isStartChangeCard:false,
						level:1,
						wardImg:'../../static/1.webp'
					},
					{
						isStartChangeCard:false,
						level:2,
						wardImg:'../../static/2.webp'
					},{
						isStartChangeCard:false,
						level:1,
						wardImg:'../../static/3.webp'
					},{
						isStartChangeCard:false,
						level:1,
						wardImg:'../../static/4.jpeg'
					},{
						isStartChangeCard:false,
						level:1,
						wardImg:'../../static/5.jpeg'
					},{
						isStartChangeCard:false,
						level:1,
						wardImg:'../../static/6.jpeg'
					},
				]
			};
		},
		mounted() {
			this.dataLen = this.cardWardData.length
		},
		methods:{
			rotateCards(){
				if(this.cardWardData.length == 0){
					return
				}
				this.cardWardData[this.idIndex].isStartChangeCard = true
				this.rotateCard()
				this.$forceUpdate()
			},
			rotateCard(){
				this.dataLen--
				if(this.dataLen<=0){
					setTimeout( () =>{
						// 延迟400ms 发送翻牌结束状态
						this.$emit('drawBoxEnd', true);
					}, 800);
					return
				}
				setTimeout( () =>{
					this.cardWardData[this.idIndex].isStartChangeCard = true
					 // 递归函数
					   this.rotateCard()
				}, 400);
				this.idIndex++
			}
		}
	}
</script>
<style lang="scss" scoped>
.fatherCard{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	background: #28272D;
}
.card {
	width: 40%;
	height: 400upx;
	margin: 50upx 0;
	flex-shrink: 0;
	margin-left: calc(20% / 3);
	border-radius: 20upx;
}
.linghtType1{
	box-shadow: 0upx  0upx 26upx 4upx #fff;
}
.linghtType2{
	box-shadow: 0upx  0upx 26upx 4upx #FFC03E;
}
.linghtType3{
	box-shadow: 0upx  0upx 26upx 4upx #EF623D;
}
.card__content {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: all 1s;
	transform-style: preserve-3d;
	border-radius: 20upx;
}
.card__front,
.card__back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	justify-content: center;
	color: white;
	border-radius: 20upx;
}
.card__back {
	background-color: #28272D;
	transform: rotateY(180deg);
}
.label{
	display: flex;
	align-items: center;
	margin-top: 6upx;
	.numCla{
		background: rgba(125, 125, 121, 0.3);
		padding: 3upx 15upx;
		position: relative;
		left: -5px;z-index: 1;
		color: rgba(250, 225, 174, 1);
		border-radius: 5upx;
		font-size: 20upx;
	}
}
.detailBox{
	position: absolute;
	z-index: 111;
	top: 73%;
	font-size:30upx;
}
</style>

2.因为uniapp不需要引用插件 可以直接使用 注意按照他的命名规范 components目录下的同名目录和文件才不用引入 注意文章中图片更换为自己的图片路径即可

示例：

<template>
	<view class="content">
		<view class="oneKeyOpenClass" @click="openingBox">
			一键开启
		</view>
		<zhuxichong-flipCard  @drawBoxEnd="drawBoxEnd_fa" ref="drawcard"></zhuxichong-flipCard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
			openingBox(){
				this.$refs.drawcard.rotateCards()
			},
			drawBoxEnd_fa(){
				//翻牌结束
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>