preface

I met a small problem today, which requires a hover button to be implemented in the H5 page. The button is fixed on one side and can slide up and down.

code

Without further ado, get right to the code.Copy the code
<template>
        <div class="suspension-icon-weiliao"  id='suspension'
            :style="{'width': '1rem','height': '1rem','right': right+'rem','bottom': bottom+'rem'}"    
            ref="div"    
            @touchstart.stop="(e) => {dragStart(e)}" 
            @touchend.stop="(e) => {dragEnd(e)}"     
            @touchmove.prevent="(e) => {dragProgress(e)}" 
            @click.stop="callWeiLiao()"   
            >    
        </div>
</template>
Copy the code
methods: {
        dragStart(e) { 
            this.$refs.div.style.transition = 'none';
        },
        dragEnd(e) {        
            this.$refs.div.style.transition = 'all 0s';        
            this.right = 0.1;
        },      
        dragProgress(e) {      
            if (e.targetTouches.length === 1) {          
                let touch = e.targetTouches[0];   

                this.right = 0.1;              
                this.bottom = (document.documentElement.clientHeight - touch.clientY) / 50;
                if (touch.clientY <= 130) {
                    this.bottom = (document.documentElement.clientHeight - document.getElementsByClassName('suspension-icon-weiliao').offsetHeight) / 50;
                }

                if (touch.clientY >= (document.documentElement.clientHeight - 130)) {
                    this.bottom = 1.3; }}}},Copy the code

This is a wrapped component that can be called simply by adding position: fixed; Can.

There are still problems

Not suitable for different models, we will find that on different machines, the hover button from the top of the distance is different sizes.Copy the code

To be solved

Touchstart. prevent will prevent the click event from happening. Removing Prevent from TouchMove will cause the micro-chat hover window to slide along with the page. The modification is as follows

    <template>
        <div class="suspension-icon-weiliao"  id='suspension'
            :style="{'width': '1rem','height': '1rem','right': right+'rem','bottom': bottom+'rem'}"    
            ref="div"    
            @touchstart.stop="(e) => {dragStart(e)}" 
            @touchend.stop="(e) => {dragEnd(e)}"     
            @touchmove.prevent="(e) => {dragProgress(e)}" 
            @click.stop="callWeiLiao()"   
            >    
        </div>
</template>
Copy the code