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

德宏大魔王

发布于 2023-08-08 15:19:32

80400

代码可运行

文章被收录于专栏：cloud stdiocloud stdio

运行总次数：0

代码可运行

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

支持滑动、点击

完整代码片段：

<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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-05-29，如有侵权请联系 cloudcommunity@tencent.com 删除

center