uni-app 可移动悬浮球插件需求

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app 可移动悬浮球插件需求

现在要实现客服入口，悬浮在页面上，切换底部栏，悬浮球位置不变，当悬浮球移动到不靠边位置 松手后自动靠边

Harmonyos Next教程
4 回复

小程序上切换原生tab，做不到常驻悬浮球，只能每个tabbar都做。 h5可以单独写绝对定位的div。 app可以用plus.nativeObj.view。


多谢回复，已经实现 就是自己写了个悬浮球组件，每个主页面都引入，然后同步球的定位，

可以自定义一个插件 在当前的window上添加一个按钮 这样的话就可以实现全局的悬浮

针对您提出的uni-app可移动悬浮球插件需求，以下是一个基本的实现思路和代码示例。该示例展示了如何创建一个可拖动的悬浮球，并包括基本的HTML结构、CSS样式以及JavaScript逻辑。

HTML结构

在pages/index/index.vue文件中，添加以下HTML结构：

<template>
  <view class="container">
    <view class="floating-ball" :style="ballStyle" @touchstart="startDrag" @touchmove="drag"></view>
  </view>
</template>

CSS样式

在<style>标签内，定义悬浮球的样式：

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.floating-ball {
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  right: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>

JavaScript逻辑

在<script>标签内，添加以下JavaScript代码：

<script>
export default {
  data() {
    return {
      ballStyle: {
        bottom: '50px',
        right: '50px',
      },
      startX: 0,
      startY: 0,
      initialX: 0,
      initialY: 0,
    };
  },
  methods: {
    startDrag(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
      this.initialX = parseInt(this.ballStyle.right, 10);
      this.initialY = parseInt(this.ballStyle.bottom, 10);
    },
    drag(e) {
      let deltaX = e.touches[0].clientX - this.startX;
      let deltaY = e.touches[0].clientY - this.startY;
      let newRight = this.initialX + deltaX;
      let newBottom = this.initialY + deltaY;

      // 限制悬浮球在屏幕范围内
      if (newRight < 0) newRight = 0;
      if (newBottom < 0) newBottom = 0;
      if (newRight > window.innerWidth - 50) newRight = window.innerWidth - 50;
      if (newBottom > window.innerHeight - 50) newBottom = window.innerHeight - 50;

      this.ballStyle.right = newRight + 'px';
      this.ballStyle.bottom = newBottom + 'px';
    },
  },
};
</script>

说明

  1. HTML结构：定义一个容器和一个悬浮球，通过:style绑定悬浮球的样式。
  2. CSS样式：设置悬浮球的外观和初始位置。
  3. JavaScript逻辑：
    • data中定义悬浮球的位置和拖动相关的变量。
    • startDrag方法记录触摸开始时的坐标和悬浮球的初始位置。
    • drag方法根据触摸移动的距离更新悬浮球的位置，并限制其在屏幕范围内移动。

此代码提供了一个基本的可移动悬浮球插件实现，您可以根据具体需求进一步扩展和优化。

回到顶部