uniapp悬浮图标支持拖动支持微信小程序

野性酷女 2023-10-11 22:43 48阅读 0赞

最近改了个UI，按钮放哪都不合适，看到别人都是用悬浮按钮，于是我自己也搞了一个，随心所欲存放位置，的确要比固定的好看的多，下面的是一个截图，代码放在下面自取

![在这里插入图片描述][a36fae90895f422bba01b065eba77e19.png]

支持滑动、点击

完整代码片段：

<template>
      <view class="float-icon" :style="{right: right + 'px', bottom: bottom + 'px'}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
        <image src="/static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
      </view>
    </template>
    
    <script>
    export default {
      data() {
        return {
          startX: 0,
          startY: 0,
          moveX: 0,
          moveY: 0,
          right: 20,
          bottom: 100,
        }
      },
      methods: {
        touchStart(e) {
          this.startX = e.touches[0].clientX
          this.startY = e.touches[0].clientY
        },
        touchMove(e) {
          this.moveX = e.touches[0].clientX - this.startX
          this.moveY = e.touches[0].clientY - this.startY
          this.right -= this.moveX
          this.bottom -= this.moveY
          this.startX = e.touches[0].clientX
          this.startY = e.touches[0].clientY
        },
        touchEnd(e) {
          // do something
        },
      },
    }
    </script>
    
    <style>
    .float-icon {
      position: fixed;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background-color: #83deff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }
    </style>

[a36fae90895f422bba01b065eba77e19.png]: https://img-blog.csdnimg.cn/a36fae90895f422bba01b065eba77e19.png