【H5】浮动小窗

版权声明：本文为simorel原创文章，未经simorel允许不得转载。 https://blog.csdn.net/Simoral/article/details/82454356

浮动小窗

---

---

html部分

// mousedown/mousemove/mouseup 是为了适配电脑端点击事件
// touchstart/touchmove/touchend 是为了适配手机端点击事件
<template>
  <img :style="{ top: top + 'px', left: left + 'px' }" ref="floating"                    
    class="movable-bd"
    @mousedown="down" @touchstart="down"
    @mousemove="move" @touchmove="move"
    @mouseup="end" @touchend="end" 
    src="/static/resource/home/map.png" />
</template>

css部分

.movable-bd {
    /* 层级定位 */
    z-index: 5;
    position: absolute;        
    top: 70%;
    right: 0;
    /* 尺寸 */
    height: 64px;
    width: 64px;
    border-radius: 32px;
    overflow: hidden;            
}

JavaScript部分

...
data () {
  return {
    ......
    /** 悬浮窗的相关配置 */
    flags: false,
    position: {
      x: 0,
      y: 0
    },
    nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',            
    top: '',
    left: '',            
    screenWidth: window.innerWidth, // 屏幕尺寸
    screenHeight: window.innerHeight
    ......
  }
},
method: {

        /**
         * 移动端拖动
         */
        down (event) {            
            this.flags = true;            
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            this.position.x = touch.clientX;            
            this.position.y = touch.clientY;
            this.dx = this.$refs.floating.getBoundingClientRect().left;                        
            this.dy = this.$refs.floating.getBoundingClientRect().top;
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove",function(){
                event.preventDefault();
            },false);
        },

        /**
         * 移动端拖动事件
         */
        move (event) {
            if(this.flags){                
                var touch;
                if(event.touches){
                    touch = event.touches[0];
                }else {
                    touch = event;
                }

                this.nx = touch.clientX - this.position.x;
                this.ny = touch.clientY - this.position.y;
                this.xPum = this.dx+this.nx;
                this.yPum = this.dy+this.ny;

                // 边缘检测判断环节，避免小球越界
                if(this.yPum < 0) {this.yPum = 0}                
                if(this.xPum < 0) {this.xPum = 0}
                let divWidth = this.$refs.floating.getBoundingClientRect().width;
                let divHeight = this.$refs.floating.getBoundingClientRect().height;                                

                if(this.xPum > (this.screenWidth - divWidth)) { this.xPum = this.screenWidth - divWidth; }
                // 这里为什么要用60呢，那就说来话长了
                // 首先我设置底部tab高度为60px，并且不转换为vw格式
                // 然后我设置页面高度底部bottom为60px
                // 都设置在.postcssrc.js的"selectorBlackList": ['footer', 'container'],内
                if(this.yPum > (this.screenHeight - divHeight - 60)) { this.yPum = this.screenHeight - divHeight - 60; }

                this.top = this.yPum;
                this.left = this.xPum;
                //阻止页面的滑动默认事件
                document.addEventListener("touchmove",function(){
                    event.preventDefault();
                },false);
            }
        }, 

        /**
         * 鼠标释放时候的函数 
         */
        end () {            
            this.flags = false;
        }
}