当前位置：首页 > uni-app

uniapp浮窗开发

2026-03-05 10:52:04uni-app

uniapp浮窗开发方法

使用`<view>`和CSS定位

在uniapp中可以通过绝对定位实现浮窗效果。在template中添加一个view元素，并设置position: fixed样式。

<template>
  <view class="float-window" v-if="showFloat">
    <!-- 浮窗内容 -->
  </view>
</template>

<style>
.float-window {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 100px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  z-index: 999;
}
</style>

添加拖拽功能

通过touch事件实现浮窗拖拽。在view上绑定touch事件，计算移动距离并更新位置。

uniapp浮窗开发

data() {
  return {
    showFloat: true,
    startX: 0,
    startY: 0,
    translateX: 0,
    translateY: 0
  }
},
methods: {
  touchStart(e) {
    this.startX = e.touches[0].clientX
    this.startY = e.touches[0].clientY
  },
  touchMove(e) {
    const currentX = e.touches[0].clientX
    const currentY = e.touches[0].clientY
    this.translateX = currentX - this.startX
    this.translateY = currentY - this.startY
  }
}

兼容多端适配

不同平台对fixed定位支持不同，需要做特殊处理。在H5端fixed表现正常，但在小程序中可能需要使用cover-view。

<!-- 小程序端使用cover-view -->
<!-- #ifdef MP-WEIXIN -->
<cover-view class="float-window">
  <!-- 浮窗内容 -->
</cover-view>
<!-- #endif -->

优化显示效果

添加动画效果提升用户体验，可以通过CSS transition或uniapp的animation API实现平滑移动。

uniapp浮窗开发

.float-window {
  transition: transform 0.3s ease;
}

处理点击穿透

浮窗可能会遮挡下方内容，需要正确处理事件冒泡。在浮窗上添加@tap.stop阻止事件冒泡。

<view class="float-window" @tap.stop="handleFloatClick">
  <!-- 浮窗内容 -->
</view>

状态持久化

将浮窗位置信息存入本地存储，下次打开时恢复位置。

methods: {
  savePosition() {
    uni.setStorageSync('floatPosition', {
      x: this.translateX,
      y: this.translateY
    })
  },
  loadPosition() {
    const pos = uni.getStorageSync('floatPosition')
    if(pos) {
      this.translateX = pos.x
      this.translateY = pos.y
    }
  }
}