<template>
<view class="card" ref="card" @touchstart="touchstart($event as TouchEvent)"
@touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend">
<image class="card-img" ref="card-img" :src="img"></image>
<view class="state">
<image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix">
</image>
<image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png"
mode="widthFix"></image>
<!-- cardIndex:{{cardIndex}} -->
</view>
</view>
</template>
<script>
let sX : number = 0,
sY : number = 0,
screenWidth : number = 1,
screenHeight : number = 1,
floating : boolean = false,
touchstartAfter : boolean = false;
export default {
options: {
virtualHost: true
},
data() {
return {
$elementMap: new Map<string, UniElement>(),
x: 0 as number,
y: 0 as number,
// 飘走的卡片计数
floatCount: 0 as number
}
},
props: {
img: {
type: String,
default: "https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-1.jpg"
},
cardIndex: {
type: Number,
default: 0
}
},
computed: {
movePercent() : number {
return Math.abs(this.x) / (screenWidth / 2 * 3)
},
likeOpacity() : number {
return this.x < 0 ? 0 : this.movePercent * 100
},
dislikeOpacity() : number {
return this.x > 0 ? 0 : this.movePercent * 100
}
},
mounted() {
screenWidth = uni.getWindowInfo().screenWidth
screenHeight = uni.getWindowInfo().screenHeight;
// TODO 需要延迟设置才能生效
setTimeout(() => {
this.setElementStyle('card', 'height', screenHeight * 0.7 + 'px');
this.setElementStyle('card-img', 'height', screenHeight * 0.7 + 'px');
this.initCardStyle()
}, 200)
uni.$on('uni-drop-card-float', () => {
this.floatCount++
this.initCardStyle()
})
},
unmounted() {
uni.$off('uni-drop-card-float')
},
methods: {
initCardStyle() {
let _index = (this.cardIndex + this.floatCount) % 3
// console.log('~~~~~~_index:'+_index + ' cardIndex:'+this.cardIndex+' floatCount:'+this.floatCount);
this.setElementStyle('card', 'z-index', _index)
this.setElementStyle('card', 'margin-top', screenHeight * 0.15 - 30 * _index + 'px');
this.setElementStyle('card', 'transform', 'scale(' + (0.9 + 0.05 * _index) + ')')
},
// 工具方法，用于快速设置 Element 的 style
setElementStyle(refName : string, propertyName : string, propertyStyle : any) : void {
const elementMap = this.$data['$elementMap'] as Map<string, UniElement>
let element : UniElement | null = elementMap.get(refName)
if (element == null) {
element = this.$refs[refName] as UniElement;
elementMap.set(refName, element)
} else {
// console.log('直接拿');
}
element.style.setProperty(propertyName, propertyStyle);
},
touchstart(e : TouchEvent) {
// console.log('touchstart')
if (floating) {
return // 浮动动画进行中
}
sX = e.touches[0].screenX;
sY = e.touches[0].screenY;
this.x = 0
this.y = 0
touchstartAfter = true
},
touchmove(e : TouchEvent) {
// console.log('touchmove')
if (!touchstartAfter || floating) {
return // floating：浮动动画进行中
}
this.x += e.touches[0].screenX - sX;
this.y += e.touches[0].screenY - sY;
sX = e.touches[0].screenX;
sY = e.touches[0].screenY;
this.moveCard()
// #ifdef WEB
//阻止默认行为
e.preventDefault()
// #endif
},
touchend() {
// console.log('touchend')
touchstartAfter = false
if (floating) {
return // 浮动动画进行中
}
floating = true
// 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
let k : number = 0;
if (this.x > screenWidth / 10) {
k = 1
} else if (this.x < screenWidth * -1 / 10) {
k = -1
}
const _this = this
function cardTo(x : number, y : number, callback : () => void, speed : number = 10) {
let interval : number = 0
let acceleration : number = 1
interval = setInterval(() => {
// 加速度
acceleration += 0.2
const dx = x - _this.x
if (Math.abs(dx) < 1) {
_this.x = x
} else {
_this.x += dx / speed * acceleration
}
const dy = y - _this.y
if (Math.abs(dy) < 1) {
_this.y = y
} else {
_this.y += dy / speed * acceleration
}
_this.moveCard()
if (_this.x == x && _this.y == y) {
clearInterval(interval)
callback()
}
}, 16)
}
if (Math.floor(k) != 0) {
cardTo(k * screenWidth * 1.3, this.y * 3, () => {
// 状态图标变回透明
this.setElementStyle("state-icon-like", 'opacity', 0)
this.setElementStyle("state-icon-dislike", 'opacity', 0)
// 设置为透明，防止飘回时因为 margin-top 太高，露出来
this.setElementStyle("card", 'opacity', 0)
setTimeout(() => {
this.setElementStyle("card", 'opacity', 1)
}, 300)
// 执行卡片飘动后事件，注意uni.$emit是全局事件。其他卡片也会执行
uni.$emit('uni-drop-card-float', null)
floating = false
}, 8)
} else {
const _x : number = this.x
const _y : number = this.y
cardTo(Math.floor(_x * -0.05), Math.floor(_y * -0.05), () => {
cardTo(0, 0, () => {
console.log('bounce')
floating = false
}, 30)
})
}
},
moveCard() {
this.setElementStyle("card",
'transform',
`translate(${this.x}px,${this.y}px) rotate(${this.x / -30}deg) scale(1)`
)
this.setElementStyle("state-icon-like", 'opacity', this.x < 0 ? 0 : this.movePercent * 10)
this.setElementStyle("state-icon-dislike", 'opacity', this.x > 0 ? 0 : this.movePercent * 10)
}
}
}
</script>
<style>
.card {
width:95%;
height: 0px;
position: absolute;
top: 0px;
/* left: 0px; */
margin: 0 12px;
margin-top: 50px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: #FFF;
transition: margin-top 300ms;
transition-timing-function: ease-in;
}
.card-img {
width: 100%;
height: 0px;
border-radius: 10px;
}
.state {
top: 10px;
left: 10px;
width: 86%;
padding: 4px;
position: absolute;
flex-direction: row;
justify-content: space-between;
}
.state-icon {
width: 30px;
height: 30px;
border: 1px solid #FFF;
background-color: #FFF;
padding: 3px;
border-radius: 100px;
box-shadow: 0 0 1px #EBEBEB;
opacity: 0;
}
</style>
