功能介绍：

在移动端开发中，实现悬浮按钮在侧边显示，为不遮挡页面内容，允许手指拖拽换位。

大致需求：

1、按钮在页面侧边悬浮显示；
2、手指长按按钮，按钮改变样式，允许拖拽改变位置；
3、按钮移动结束，手指松开，计算距离左右两侧距离并自动移动至侧边显示；
4、移动至侧边后，按钮根据具体左右两次位置判断改变现实样式；

整体思路：

1、按钮实行position:fixed布局，在页面两侧最上层悬浮显示；
2、手指长按可使用定时器来判断，若手指松开，则关闭定时器，等待下次操作再启用；
3、跟随手指移动计算按钮与页面两侧的距离，判断手指松开时停留的位置；

简单效果展示：

具体实现：

一、position:fixed布局：

使用定位实现

<!-- 外层ul控制卡片范围 -->
<div>
    <div class="floatBtn" 
        :class="[{moveBtn: longClick}, `${btnType}Btn`]">
    <span>悬浮按钮</span>
  </div>
</div>

<style lang="scss" scoped>
  @mixin notSelect{
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
  }
  @mixin not-touch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .floatBtn {
    @include notSelect;
    @include not-touch();
    position: fixed;
    z-index: 1;
    overflow: hidden;
    width: 100px;
    left: calc(100% - 100px);
    top: calc(100% - 100px);
    color: #E0933A;
    background: #FCEBD0;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    &.rightBtn {
      border-radius: 20px 0 0 20px;
    }
    &.leftBtn {
      border-radius: 0 20px 20px 0;
    }
    &.moveBtn {
      border-radius: 20px;
    }
  }
</style>

二、touch事件绑定：

应用到touchstart，touchmove，touchend事件，使用定时器实现长按效果：

<div class="floatBtn"
    :class="[{moveBtn: longClick}, `${btnType}Btn`]"
    @touchstart="touchstart($event)"
    @touchmove="touchMove($event)"
    @touchend="touchEnd($event)"
>
    <span>悬浮按钮</span>
</div>

<script>
export default {
    data() {
        return {
            timeOutEvent: 0,
            longClick: 0,
            // 手指原始位置
            oldMousePos: {},
            // 元素原始位置
            oldNodePos: {},
            btnType: 'right'
        };
    },
    touchstart(ev) {
        // 定时器控制长按时间，超过500毫秒开始进行拖拽
        this.timeOutEvent = setTimeout(() => {
            this.longClick = 1;
        }, 500);
        const selectDom = ev.currentTarget;
        const { pageX, pageY } = ev.touches[0]; // 手指位置
        const { offsetLeft, offsetTop } = selectDom; // 元素位置
        // 手指原始位置
        this.oldMousePos = {
            x: pageX,
            y: pageY
        };
        // 元素原始位置
        this.oldNodePos = {
            x: offsetLeft,
            y: offsetTop
        };
        selectDom.style.left = `${offsetLeft}px`;
        selectDom.style.top = `${offsetTop}px`;
    },
    touchMove(ev) {
        // 未达到500毫秒就移动则不触发长按，清空定时器
        clearTimeout(this.timeOutEvent);
        if (this.longClick === 1) {
            const selectDom = ev.currentTarget;
            // x轴偏移量
            const lefts = this.oldMousePos.x - this.oldNodePos.x;
            // y轴偏移量
            const tops = this.oldMousePos.y - this.oldNodePos.y;
            const { pageX, pageY } = ev.touches[0]; // 手指位置
            selectDom.style.left = `${pageX - lefts}px`;
            selectDom.style.top = `${pageY - tops}px`;
        }
    },
    touchEnd(ev) {
        // 清空定时器
        clearTimeout(this.timeOutEvent);
        if (this.longClick === 1) {
            this.longClick = 0;
            const selectDom = ev.currentTarget;
            const {clientWidth, clientHeight} = document.body;
            const {offsetLeft, offsetTop} = selectDom;
            selectDom.style.left = 
                (offsetLeft + 50) > (clientWidth / 2) ? 
                'calc(100% - 100px)' : 0;
            if (offsetTop < 90) {
                selectDom.style.top = '90px';
            } else if (offsetTop + 36 > clientHeight) {
                selectDom.style.top = `${clientHeight - 36}px`;
            }
            this.btnType = 
                (offsetLeft + 50) > (clientWidth / 2) ? 
                'right' : 'left';
        }
    },
};
</script>

三、页面引入：

单个页面引入

<template>
    <floatBtn/>
</template>

<script>
import floatBtn from './floatBtn';
export default {
    components: {
        floatBtn
    },
};
</script>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用node.js怎样做命令行游戏？实现原理是什么？

  用node.js怎样做命令行游戏？其实要实现一个命令行游戏并不困难，这篇文章就以实现贪吃蛇游戏为例，给大家分享一下实现命令行游戏的原理及实现代码，感兴趣的朋友可以参考。

• React基础知识有哪些要点需掌握？

  这篇文章主要介绍了react常用的基础知识总结，帮助大家更好的理解和学习使用react框架，感兴趣的朋友可以了解下

• 小程序间的跳转怎样做？教你两种方式

  小程序间的跳转怎样做？我们知道小程序之间是可以实现互相跳转的，这样好处就是现实流量的循环。那么接下来就给大家分享一下实现小程序间的跳转的两种方式，感兴趣的朋友可以了解看看。

• vuex中刷新数据消失的问题怎样处理?

  这篇文章给大家分享的是vuex中刷新数据消失的问题的解决方法，下文有具体的问题分析、解决思路及方法，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• 基于rem怎样做自适应布局，代码是什么

  Vue前端项目自适应布局的简单方法,下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。