uniapp 如何实现一个不会销毁的悬浮窗

在uniapp中，如何实现一个全局悬浮窗，即使在页面切换时也不会被销毁？我需要这个悬浮窗始终保持在最上层，可以点击操作，并且不影响其他页面功能。请问有什么好的解决方案或组件推荐吗？

2 回复

在uniapp中，实现不销毁的悬浮窗可以通过以下方式：

  1. 使用plus.nativeObj.View创建原生悬浮窗
  2. 在onShow生命周期中显示悬浮窗
  3. 在onHide中隐藏而非销毁
  4. 通过全局变量保存悬浮窗实例

关键代码：

let floatView = null
function createFloatView() {
  floatView = new plus.nativeObj.View('float', {...})
}

这样页面切换时悬浮窗不会销毁，只是隐藏显示状态切换。


在 UniApp 中，可以通过以下方法实现一个不会随页面切换而销毁的悬浮窗：

实现方案

  1. 使用 plus.nativeObj.View（仅限 App 端）
  2. 将悬浮窗放在 App.vue 中（全局组件）
  3. 使用 Vuex 管理状态

代码示例

  1. 在 App.vue 中创建悬浮窗
<script>
export default {
  onLaunch() {
    // 创建原生悬浮窗（仅 App 端有效）
    this.createFloatWindow()
  },
  methods: {
    createFloatWindow() {
      // 检查运行环境
      if (typeof plus !== 'undefined') {
        const view = new plus.nativeObj.View('floatView', {
          top: '100px',
          left: '10px',
          width: '50px',
          height: '50px',
          backgroundColor: '#FF0000'
        })
        
        // 添加点击事件
        view.addEventListener('click', () => {
          uni.showToast({
            title: '悬浮窗被点击',
            icon: 'none'
          })
        })
        
        // 显示悬浮窗
        view.show()
        
        // 保存到全局，确保不会销毁
        this.$scope.globalData.floatView = view
      }
    }
  }
}
</script>
  1. 在页面中控制悬浮窗
// 在任何页面中都可以控制悬浮窗
const floatView = getApp().globalData.floatView

// 显示悬浮窗
floatView.show()

// 隐藏悬浮窗
floatView.hide()

// 移动悬浮窗
floatView.setStyle({
  top: '200px',
  left: '20px'
})

注意事项

  1. 平台限制：此方案仅适用于 App 端，H5 和小程序不支持
  2. 权限问题：Android 可能需要悬浮窗权限
  3. 内存管理：确保在应用退出时销毁悬浮窗
  4. 页面遮挡：悬浮窗会覆盖在所有页面上方

替代方案

如果需要在多端运行，可以考虑：

  • 使用 cover-view（小程序端）
  • 在每个页面都放置悬浮窗组件
  • 通过路由监听控制显示/隐藏

这样可以实现一个真正不会随页面切换而销毁的悬浮窗组件。

回到顶部