uniapp浮动组件

实现浮动组件的基本方法

在UniApp中创建浮动组件通常使用position: fixed或position: absolute结合动态样式实现。以下是一个基础示例：

<template>
  <view class="float-button" :style="{bottom: btnBottom + 'px', right: btnRight + 'px'}" @click="handleClick">
    <text>+</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnBottom: 20,
      btnRight: 20
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮点击'
      })
    }
  }
}
</script>

<style>
.float-button {
  position: fixed;
  width: 60px;
  height: 60px;
  background-color: #007AFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 999;
}
</style>

可拖拽浮动组件实现

通过touch事件实现组件拖拽功能：

methods: {
  touchStart(e) {
    this.startX = e.touches[0].clientX
    this.startY = e.touches[0].clientY
  },
  touchMove(e) {
    const moveX = e.touches[0].clientX - this.startX
    const moveY = e.touches[0].clientY - this.startY
    this.btnRight = Math.max(0, this.btnRight - moveX)
    this.btnBottom = Math.max(0, this.btnBottom - moveY)
    this.startX = e.touches[0].clientX
    this.startY = e.touches[0].clientY
  }
}

在模板中添加事件绑定：

<view 
  class="float-button" 
  :style="{bottom: btnBottom + 'px', right: btnRight + 'px'}"
  @touchstart="touchStart"
  @touchmove="touchMove"
  @click="handleClick">
  <text>+</text>
</view>

浮动组件动画效果

添加CSS过渡动画使组件更生动：

.float-button {
  transition: transform 0.2s;
}
.float-button:active {
  transform: scale(0.95);
}

多平台适配方案

考虑不同平台的样式差异：

/* #ifdef H5 */
.float-button {
  cursor: pointer;
}
/* #endif */

/* #ifdef APP-PLUS */
.float-button {
  elevation: 5;
}
/* #endif */

组件封装与复用

将浮动组件封装为可复用的自定义组件：

<!-- components/float-btn/float-btn.vue -->
<template>
  <view class="float-btn" @click="$emit('click')">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'float-btn'
}
</script>

使用时：

<float-btn @click="handleFloatClick" style="bottom:100px;right:20px">
  <image src="/static/icon.png"></image>
</float-btn>