小程序模仿探探卡片滑动效果(wepy版）

最近公司有个需求要和探探一样，左滑右滑匹配，然后花了2个小时简单的实现了一下，第二天需求要改，所以这个就不去优化了，留给大家去优化

<!--  -->
<template>
    <view class='container'>
        <movable-area style="height: 200vh; width: 400vw;left:-40vw;top:-50vh;">
            <movable-view wx:if="{{visible1}}" data-id="f" style="height: 50vh;width:100vw;left:190vw;top:50vh;z-index:{{z1}} " bindtouchend="touchendimg" bindtouchcancel='touchendimg' x="{{x}}" inertia="{{true}}" y="{{y}}" friction="1" damping="35" direction="all" bindchange="moveimg" animation="false">
                <image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=531929377,4121486257&fm=26&gp=0.jpg" mode="aspectFill"></image>
            </movable-view>
            <movable-view wx:if="{{visible2}}" data-id="s" style="height: 50vh;width:100vw;left:190vw;top:50vh;z-index:{{z2}} " bindtouchend="touchendimg" bindtouchcancel='touchendimg' x="{{x1}}" y="{{y1}}" inertia="{{true}}" friction="1" damping="35" direction="all" bindchange="moveimg" animation="false">
                <image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=531929377,4121486257&fm=26&gp=0.jpg" mode="aspectFill"></image>
            </movable-view>
        </movable-area>
    </view>
</template>

<script>
import wepy from 'wepy';
let prex = 0;
export default class Battle extends wepy.component {
    data = {
        x: 0,
        y: 0,
        x1: 0,
        y1: 0,
        visible1: true,
        visible2: true,
        z1: 0,
        z2: 0,
    };

    components = {};

    methods = {
        moveimg(e) {
            prex = e.detail.x;
        },
        async touchendimg(e) {
            console.log(e);
            console.log(prex);
            const { id } = e.currentTarget.dataset;
            if (prex < -145) {
                if (id == 'f') {
                    this.x = -400 + Math.random();
                } else {
                    this.x1 = -400 + Math.random();
                }
                await this.delay();
                this.resetPosition(id);
            } else if (prex > 145) {
                if (id == 'f') {
                    this.x = 400 + Math.random();
                } else {
                    this.x1 = 400 + Math.random();
                }
                await this.delay();
                this.resetPosition(id);
            } else {
                if (id == 'f') {
                    this.x = Math.random();
                    this.y = Math.random();
                } else {
                    this.x1 = Math.random();
                    this.y1 = Math.random();
                }
                this.$apply();
            }
        }
    };
    async resetPosition(type) {
        if (type == 'f') {
            this.z2 = this.z2 + 1;
            this.visible1 = false;
            this.x = 0;
            this.y = 0;
            await this.delay();
            this.visible1 = true;
        } else {
            this.z1 = this.z1 + 1;
            this.x1 = 0;
            this.y1 = 0;
            this.visible2 = false;
            await this.delay();
            this.visible2 = true;
        }
        this.$apply();
    }
    delay() {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve.bind(null, 10), 200);
        });
    }
    events = {};

    watch = {};

    computed = {};

    async onLoad() {
    }

    onShow() {}
}
</script>

<style lang='less' scoped>
.container {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    image {
        width: 100%;
        height: 100%;
    }
    .battle-top {
        width: 100%;
        height: calc(50vh - 50rpx);
    }
    .battle-bottom {
        width: 100%;
        height: calc(50vh - 50rpx);
    }
}
</style>