uniapp 桌面悬浮菜单如何实现

在uniapp中如何实现桌面悬浮菜单？需要支持拖拽移动位置，点击展开子菜单等功能。目前尝试过使用cover-view和fixed定位，但在部分安卓机型上会出现穿透问题。请问有没有成熟的解决方案或组件推荐？最好能兼容H5和APP端。

2 回复

在uniapp中，可通过plus.nativeObj.View创建悬浮窗。使用new plus.nativeObj.View创建视图，设置样式和位置，添加点击事件。注意需在plusready后初始化，并申请悬浮窗权限。


在 UniApp 中实现桌面悬浮菜单（类似悬浮按钮或浮动菜单）可以通过以下步骤实现。由于 UniApp 本身不提供原生悬浮控件，需结合 plus.nativeObj.View（5+ App 原生能力）来创建。以下是详细方法和示例代码：

实现步骤

  1. 引入 5+ 原生模块：使用 uni.requireNativePlugin 或直接调用 plus.nativeObj.View。
  2. 创建悬浮视图：定义按钮位置、样式和事件。
  3. 处理拖动和点击事件：让按钮可拖动，并展开菜单。
  4. 兼容性处理：确保在 App 端运行（H5 不支持）。

示例代码

在 onReady 或 onLoad 中初始化悬浮菜单：

export default {
  data() {
    return {
      floatingMenu: null,
      isMenuOpen: false,
      menuItems: ['选项1', '选项2', '选项3'] // 菜单项
    };
  },
  onReady() {
    this.createFloatingMenu();
  },
  methods: {
    // 创建悬浮菜单
    createFloatingMenu() {
      // 检查运行环境
      if (typeof plus === 'undefined') {
        console.log('仅支持 App 平台');
        return;
      }

      // 创建主悬浮按钮
      this.floatingMenu = new plus.nativeObj.View('floatBtn', {
        top: '50%',
        left: '80%',
        width: '50px',
        height: '50px',
        backgroundColor: '#007AFF',
        borderRadius: '25px'
      });

      // 添加图标或文字
      this.floatingMenu.drawText('菜单', {}, { color: '#FFFFFF', size: '14px' });

      // 监听点击事件
      this.floatingMenu.addEventListener('click', (e) => {
        this.toggleMenu();
      });

      // 启用拖动
      this.floatingMenu.drag({
        direction: 'all',
        moveMode: 'follow'
      }, (e) => {});

      // 显示悬浮按钮
      this.floatingMenu.show();
    },

    // 切换菜单展开/收起
    toggleMenu() {
      if (this.isMenuOpen) {
        this.closeMenu();
      } else {
        this.openMenu();
      }
    },

    // 展开菜单
    openMenu() {
      this.menuItems.forEach((item, index) => {
        let menuItem = new plus.nativeObj.View(`menuItem${index}`, {
          top: `${this.floatingMenu.getPosition().top - (index + 1) * 60}px`,
          left: this.floatingMenu.getPosition().left,
          width: '100px',
          height: '40px',
          backgroundColor: '#333',
          borderRadius: '5px'
        });
        menuItem.drawText(item, {}, { color: '#FFF', size: '12px' });
        menuItem.addEventListener('click', () => {
          uni.showToast({ title: `点击了${item}`, icon: 'none' });
          this.closeMenu();
        });
        menuItem.show();
        this[`menuItem${index}`] = menuItem; // 保存引用
      });
      this.isMenuOpen = true;
    },

    // 关闭菜单
    closeMenu() {
      this.menuItems.forEach((item, index) => {
        if (this[`menuItem${index}`]) {
          this[`menuItem${index}`].close();
          this[`menuItem${index}`] = null;
        }
      });
      this.isMenuOpen = false;
    }
  },
  onUnload() {
    // 页面卸载时销毁悬浮菜单
    if (this.floatingMenu) {
      this.floatingMenu.close();
    }
    this.menuItems.forEach((item, index) => {
      if (this[`menuItem${index}`]) {
        this[`menuItem${index}`].close();
      }
    });
  }
};

注意事项

  • 平台限制：仅支持 App 端（Android/iOS），H5 或小程序无法使用。
  • 权限问题：Android 可能需要悬浮窗权限（需动态申请）。
  • 性能优化：避免频繁创建/销毁视图，可复用 DOM 元素。
  • 样式调整：根据需求修改位置、颜色和动画效果。

通过以上代码，即可在 UniApp 中实现一个可拖动、点击展开的桌面悬浮菜单。根据实际需求调整菜单项内容和交互逻辑。

回到顶部