移动端小浮标

<template>
    <!--拖拽小浮标模块 开始-->
    <div class="wg-drag" v-if="dragPopFlag">
        <div class="drag-box">
            <div
                ref="dragIcon"
                class="drag-icon"
                @touchstart.stop="handleTouchStart"
                @touchmove.prevent.stop="handleTouchMove($event)"
                @touchend.stop="handleTouchEnd"
                :style="{
                    left: left + 'px',
                    top: top + 'px',
                    width: itemWidth + 'px',
                    height: itemHeight + 'px',
                }"
                v-if="isShow"
            >
                <img @click="topage" src="../assets/buoy.gif" />
            </div>
        </div>
    </div>
    <!--拖拽小浮标 结束-->
</template>

<script>
export default {
    props: {
        // 小浮标宽度
        itemWidth: {
            type: Number,
            default: 50
        },
        // 小浮标宽度
        itemHeight: {
            type: Number,
            default: 60
        }
    },
    data () {
        return {
            dragPopFlag: true, //是否显示组件
            left: 0, // 距离左边距离
            top: 0, // 距离顶部距离
            startToMove: false, // 开始移动
            isShow: true, //是否显示小浮标
            timer: null, // 定时器
            currentTop: null, // 滚动条距离顶部
            clientW: document.documentElement.clientWidth, //视口宽
            clientH: document.documentElement.clientHeight //视口高
        };
    },
    created () {
        // 初始化位置
        this.left = this.clientW - this.itemWidth;
        this.top = this.clientH / 2 - this.itemHeight / 2 + 60;
    },
    mounted () {
        // 监听滚动条事件
        this.bindScrollEvent();
    },
    beforeDestroy () {
        // 记得销毁一些全局的的事件
        this.removeScrollEvent();
    },
    methods: {
        // 单击跳转
        topage () {
            window.location.href = 'http://app.fmcc.com.cn:6001/pageModuleH5/?id=4746511969&ch=618_01';
        },
        // 关闭组件，一般这个事件会伴随一个确认框
        closeDragPop () {
            this.dragPopFlag = false;
        },
        // 开始拖动
        handleTouchStart () {
            this.startToMove = true;
            this.$refs.dragIcon.style.transition = 'none';
        },
        // 手指拖动过程
        handleTouchMove (e) {
            const clientX = e.targetTouches[0].clientX; //手指相对视口的x
            const clientY = e.targetTouches[0].clientY; //手指相对视口的y
            const isInScreen =
                clientX <= this.clientW &&
                clientX >= 0 &&
                clientY <= this.clientH &&
                clientY >= 0;
            if (this.startToMove && e.targetTouches.length === 1) {
                if (isInScreen) {
                    this.left = clientX - this.itemWidth / 2;
                    this.top = clientY - this.itemHeight / 2;
                }
            }
        },
        // 拖动结束
        handleTouchEnd () {
            if (this.left < this.clientW / 2) {
                this.left = 0; //不让贴边 所以设置30没设置0
                this.handleIconY();
            } else {
                this.left = this.clientW - this.itemWidth; //不让贴边 所以减30
                this.handleIconY();
            }
            this.$refs.dragIcon.style.transition = 'all .3s';
        },
        handleIconY () {
            if (this.top < 0) {
                this.top = 30; //不上帖上边所以设置为30 没设置0
            } else if (this.top + this.itemHeight > this.clientH) {
                this.top = this.clientH - this.itemHeight - 60; //不让帖下边所以减60
            }
        },
        // 绑定滚动条事件
        bindScrollEvent () {
            window.addEventListener('scroll', this.handleScrollStart);
        },
        // 移除滚动条事件
        removeScrollEvent () {
            window.removeEventListener('scroll', this.handleScrollStart);
        },
        handleScrollStart () {
            // this.isShow = false;
            this.timer && clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.handleScrollEnd();
            }, 300);
            this.currentTop =
                document.documentElement.scrollTop || document.body.scrollTop;
        },
        handleScrollEnd () {
            this.scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            // 判断是否停止滚动的条件
            // if (this.scrollTop == this.currentTop) {
            //     this.isShow = true;
            // }
        }
    }
};
</script>
<style lang="scss">
.wg-drag {
    font-family: PingFangSC-Medium, PingFang SC;
    .drag-box {
        .drag-icon {
            position: fixed;
            z-index: 999;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            img {
                width: 44px;
                height: 44px;
                display: block;
            }
        }
        .drag-close {
            width: 12px;
            height: 12px;
            text-align: center;
            margin: 6px auto 0;
        }
        .v-enter {
            opacity: 1;
        }
        .v-leave-to {
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active {
            transition: opacity 0.3s;
        }
    }
}
</style>