uniapp 仿探探卡片右滑效果 完美兼容 APP H5

<template> <view style="position: fixed;top:4vh; height:100%;width:100%;" :style="{paddingLeft:paddingLeft+'px'}"> <view style="position: absolute;" :style="{width:cardWidth+'px',height:cardHeight+'px',top:'calc(50vh - '+(cardHeight-30)/2+ 'px)',left:'calc(50vw - '+cardWidth/2+ 'px)'}"> <!-- <view class="card" style="z-index: 13;" :style="{width:cardWidth+'rpx',height:cardHeight+'rpx',left:left+'px',top:top+'px','border-radius':borderRadius+'px',backgroundColor:cardBgColor}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}" @touchstart="touchStart" @touchmove="touchMove" @touchcancel="touchCancel" @touchend="touchCancel"> <slot name="firstCard"></slot> </view> <view class="card" style="z-index: 12;" :style="{width:width2+'rpx',height:height2+'rpx',left:left2+'rpx',top:top2+'rpx','border-radius':borderRadius+'rpx',backgroundColor:cardBgColor}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}"> <slot name="secondCard"></slot> </view> <view class="card" style="z-index: 11;" :style="{width:width3+'rpx',height:height3+'rpx',left:left3+'rpx',top:top3+'rpx','border-radius':borderRadius+'rpx',backgroundColor:cardBgColor}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}"> <slot name="thirdCard"></slot> </view> <view class="card" style="z-index: 10;" :style="{width:width4+'rpx',height:height4+'rpx',left:left4+'rpx',top:top4+'rpx','border-radius':borderRadius+'rpx',backgroundColor:cardBgColor,opacity:opacity4}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}"> <slot name="fourCard"></slot> </view> --> <view class="card" v-for="(item,index) in showCardList" ref="card" :style="[getStyle(index)]" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}" @touchstart="touchStart($event,index)" @touchmove="touchMove($event,index)" @touchcancel="touchCancel($event,index)" @touchend="touchCancel($event,index)"> <card @reback="reback(index)" @doLike="doLike(index)" :info="item" :bgColor="index==moveIndex?bgColor:'rgba(0,0,0,.32)'" :iconColor="index==moveIndex?iconColor:'rgb(219,84,83)'" :noColor="index==moveIndex?noColor:'rgba(0,0,0,.32)'" iconNoColor="#fff"> </card> </view> </view> </view> </template> <script> import card from '@/components/card-box/card.vue' export default { components: { card }, props: { cards: { type: Array, default: function() { return [] } }, // // 正常卡片宽度 // cardWidth: { // type: Number, // default: 690 // }, // // 正常卡片高度 // cardHeight: { // type: Number, // default: 1194 // }, // 卡片层叠的横向边距 leftPad: { type: Number, default: 20 }, // 卡片层叠的纵向边距 topPad: { type: Number, default: 8 }, // 卡片背景色 cardBgColor: { type: String, default: "#fff" }, // 卡片拖拽方向 dragDirection: { type: String, default: "all" //all,vertical,horizontal }, // 卡片的圆角弧度 borderRadius: { type: Number, default: 10 }, // 卡片触发飞卡效果的距离 throwTriggerDistance: { type: Number, default: 100 }, // 飞卡的移动距离 throwDistance: { type: Number, default: 1000 }, // 是否开启卡片描边效果 hasBorder: { type: Boolean, default: false }, // 是否开启阴影效果 hasShadow: { type: Boolean, default: true } }, data() { return { showCardList:[], canBack:true, moveIndex: 0, checkNum:0, showIndex: 0, bgColor: 'rgba(0,0,0,.2)', iconColor: 'rgb(219,84,83)', noColor: 'rgba(0,0,0,.2)', iconNoColor: 'rgb(255,255,255)', left: 0, top: 0, startLeft: 0, startTop: 0, isDrag: false, isThrow: false, needBack: false, isAnimating: false, cardWidth:600, cardHeight:1090, paddingLeft: 0, paddingTop: 0 }; }, watch:{ cards:{ handler(newval,oldval){ this.init() }, immediate:true } }, methods: { init(){ let that = this; uni.getSystemInfo({ success(res) { that.cardWidth = res.windowWidth - 10; that.cardHeight = res.windowHeight - 140; } }) this.showCardList = []; this.checkNum = 0; let allCards = JSON.parse(JSON.stringify(this.cards)); if(allCards.length < 5){ this.showCardList = allCards; return; } this.showCardList = allCards.slice(0,4); this.roundList = allCards.slice(4,); }, getStyle(index){ return { zIndex:100-index, width:((this.cardWidth - this.leftPad * (index-this.checkNum)) +'px'), height:(this.cardHeight - this.topPad*(index-this.checkNum) ) +'px', transform:'translate3d(' + (this.moveIndex == index ? this.left : this.showCardList[index].left ? this.showCardList[index].left : this.leftPad/2*(index-this.checkNum)) + 'px,' +(this.moveIndex == index ? this.top : this.showCardList[index].top ? this.showCardList[index].top : -this.topPad*(index-this.checkNum)) + 'px,' + (this.checkNum - index) * 10 + 'px)', 'border-radius':this.borderRadius+'px', backgroundColor:this.cardBgColor, } }, reback(index) { if(index==0)return; if(this.canBack){ this.canBack = false; this.moveIndex = index-1; this.checkNum--; this.left = this.leftPad/2*(this.moveIndex-this.checkNum); this.top = -this.topPad*(this.moveIndex-this.checkNum); }else{ this.$.msg('不能再返回了 ') } }, doLike(index) { this.$set(this.showCardList[index],'isLike',true) }, getColorByBaiFenBi(bili) { //var 百分之一 = (单色值范围) / 50; 单颜色的变化范围只在50%之内 var one = (255 + 255) / 100; var r = 0; var g = 0; var b = 0; if (bili < 50) { // 比例小于50的时候红色是越来越多的,直到红色为255时(红+绿)变为黄色. r = 255; b = one * bili; g = 0; } if (bili >= 50) { // 比例大于50的时候绿色是越来越少的,直到0 变为纯红 g = 255 - ((100 - bili) * one); b = 255 - ((100 - bili) * one); r = 255; } r = parseInt(r); // 取整 g = parseInt(g); // 取整 b = parseInt(b); // 取整 //console.log("#"+r.toString(16,2)+g.toString(16,2)+b.toString(16,2)); //return "#"+r.toString(16,2)+g.toString(16,2)+b.toString(16,2); //console.log("rgb("+r+","+g+","+b+")" ); return "rgb(" + r + "," + g + "," + b + ")"; }, onCardDragMove(obj) { let ratio = Math.min(obj.left / 100, 1) if (obj.left < 0) { this.noColor = `rgba(0,0,0,${-ratio})` this.bgColor = 'rgba(0,0,0,.2)' this.iconColor = 'rgb(219,84,83)' } else if (obj.left > 0) { this.noColor = 'rgba(0,0,0,.2)' this.bgColor = `rgba(219,84,83,${ratio})` this.iconColor = this.getColorByBaiFenBi(ratio * 100) } }, getDistance: function(x1, y1, x2, y2) { var _x = Math.abs(x1 - x2); var _y = Math.abs(y1 - y2); return Math.sqrt(_x * _x + _y * _y); }, touchStart: function(e, index) { this.moveIndex = index; if(index != this.checkNum) return; if (this.isAnimating) return; this.isDrag = true; this.needBack = false; this.isThrow = false; var curTouch = e.touches[0]; this.top = 0; this.left = 0; this.startLeft = curTouch.clientX; this.startTop = curTouch.clientY; }, touchMove: function(e, index) { if (this.isAnimating) return; var curTouch = e.touches[0]; if (this.dragDirection == "all" || this.dragDirectio