uni-app 安卓Webview页面悬浮按钮 可拖拽吸边 - LeXIang 没有引用教程？

在uni-app中实现安卓Webview页面悬浮按钮，且支持拖拽和吸边功能，你可以利用Vue框架和uni-app提供的API来实现。以下是一个简化的代码示例，展示如何实现这一功能。

首先，确保你已经在pages.json中配置了你的Webview页面，这里假设你的Webview页面路径为pages/webview/webview。

1. 创建悬浮按钮组件

在components目录下创建一个名为FloatingButton.vue的组件：

<template>
  <view
    class="floating-button"
    :style="{ top: position.y + 'px', left: position.x + 'px' }"
    @touchstart="startDrag"
    @touchmove="dragging"
    @touchend="endDrag"
  >
    +
  </view>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 50, y: 500 }, // 初始位置
      dragging: false,
      startPoint: {}
    };
  },
  methods: {
    startDrag(e) {
      this.dragging = true;
      this.startPoint = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    },
    dragging(e) {
      if (!this.dragging) return;
      let moveX = e.touches[0].clientX - this.startPoint.x;
      let moveY = e.touches[0].clientY - this.startPoint.y;
      this.position.x += moveX;
      this.position.y += moveY;
      // 吸边逻辑（简单实现，可根据需要调整）
      if (this.position.x < 10) this.position.x = 10;
      if (this.position.y < 10) this.position.y = 10;
      if (this.position.x + 50 > uni.getSystemInfoSync().windowWidth) {
        this.position.x = uni.getSystemInfoSync().windowWidth - 50;
      }
      if (this.position.y + 50 > uni.getSystemInfoSync().windowHeight) {
        this.position.y = uni.getSystemInfoSync().windowHeight - 50;
      }
    },
    endDrag() {
      this.dragging = false;
    }
  }
};
</script>

<style>
.floating-button {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
</style>

1. 在Webview页面中使用悬浮按钮组件

在你的webview.vue页面中引入并使用FloatingButton组件：

<template>
  <view>
    <web-view :src="webviewUrl"></web-view>
    <FloatingButton />
  </view>
</template>

<script>
import FloatingButton from '@/components/FloatingButton.vue';

export default {
  components: {
    FloatingButton
  },
  data() {
    return {
      webviewUrl: 'https://your-webview-url.com' // 替换为你的Webview URL
    };
  }
};
</script>

以上代码提供了一个基本的悬浮按钮组件，支持拖拽和简单的吸边逻辑。你可以根据实际需求进一步调整和优化代码，比如添加更多的吸边条件、优化拖拽体验等。