更新记录

1.1.0（2025-03-15） 下载此版本

悬浮按钮组件优化说明

优化点说明

1. 响应式系统优化

  • ​拆分样式对象：将buttonStyle拆分为posX/posY基础类型ref，减少响应式依赖
  • ​尺寸缓存机制：使用watchEffect缓存解析后的尺寸值，避免重复计算
  • ​数值型存储：位置信息存储为数值而非带单位字符串，减少字符串操作

2. 事件处理优化

  • ​局部变量缓存：在事件处理中缓存screenWidth等常用值
  • ​简化移动计算：使用clientX/Y直接计算取代多次响应式访问
  • ​防抖处理：窗口resize事件添加100ms防抖，减少触发频率

3. 贴边算法优化

  • ​中心点比较法：通过按钮中心点与屏幕中心比较决定贴边方向
  • ​预计算边界值：提前计算maxX/maxY等边界值
  • ​垂直贴边优化：添加verticalStick参数控制垂直贴边行为

4. CSS性能优化

  • ​will-change属性：提示浏览器进行transform优化
  • ​复合动画属性：使用scale代替宽高变化减少重绘
  • ​简化阴影效果：使用固定阴影值避免动态计算

5. 内存优化

  • ​基础类型优先：使用number代替object减少内存占用
  • ​事件解绑：组件卸载时移除resize监听
  • ​定时器清理：防抖处理中及时清理定时器

5. 交互优化

  • ​悬浮按钮：点击增加"按压反馈"效果

参数说明表

参数名 类型 默认值 说明
src String - ​必填 图标资源路径
width String/Number '140rpx' 按钮宽度，支持格式：120rpx/50%/100（px值）
height String/Number '140rpx' 按钮高度，格式同width
initialRight String/Number '0rpx' 初始右侧位置，百分比基于屏幕宽度
initialTop String/Number '30%' 初始顶部位置，百分比基于屏幕高度
clickThreshold Number 8 点击识别阈值（单位：px），移动距离小于该值触发点击
stickOffset String/Number '0rpx' 贴边偏移量，支持负值可实现贴边隐藏效果
imageMode String 'scaleToFill' 图片裁剪模式，同uni-app image组件mode属性
verticalStick Boolean false 是否启用垂直贴边，开启后上下也会贴边

单位支持说明

  • ​百分比单位：30% 基于屏幕尺寸计算
  • ​rpx单位：140rpx 自动转换为px
  • ​像素单位：直接数字值或100px格式
  • ​混合使用：不同属性可混用单位，如：
    :width="100" initial-right="10%"

注意事项

  1. ​贴边偏移量：负值示例 -20rpx 可实现按钮部分隐藏效果
  2. ​点击判定：实际阈值计算使用曼哈顿距离（X+Y绝对值之和）
  3. ​性能敏感参数：频繁修改width/height可能影响性能
  4. ​层级问题：固定z-index为9999，必要时可通过外部样式覆盖
  5. ​平台差异：iOS端可能需要添加-webkit-backdrop-filter兼容

使用示例


<FloatingButton
  src="/static/icon.png"
  width="140rpx"
  initial-top="20%"
  stick-offset="-20rpx"
  :vertical-stick="true"
  @click="handleButtonClick"
/>

1.0.1（2024-12-04） 下载此版本

属性说明

1.0.0（2024-12-04） 下载此版本

优化安卓真机拖拽性能

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.54 app-vue × √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
√ √ √ √ ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ × × × ×

悬浮按钮组件优化说明

优化点说明

1. 响应式系统优化

  • ​拆分样式对象：将buttonStyle拆分为posX/posY基础类型ref，减少响应式依赖
  • ​尺寸缓存机制：使用watchEffect缓存解析后的尺寸值，避免重复计算
  • ​数值型存储：位置信息存储为数值而非带单位字符串，减少字符串操作

2. 事件处理优化

  • ​局部变量缓存：在事件处理中缓存screenWidth等常用值
  • ​简化移动计算：使用clientX/Y直接计算取代多次响应式访问
  • ​防抖处理：窗口resize事件添加100ms防抖，减少触发频率

3. 贴边算法优化

  • ​中心点比较法：通过按钮中心点与屏幕中心比较决定贴边方向
  • ​预计算边界值：提前计算maxX/maxY等边界值
  • ​垂直贴边优化：添加verticalStick参数控制垂直贴边行为

4. CSS性能优化

  • ​will-change属性：提示浏览器进行transform优化
  • ​复合动画属性：使用scale代替宽高变化减少重绘
  • ​简化阴影效果：使用固定阴影值避免动态计算

5. 内存优化

  • ​基础类型优先：使用number代替object减少内存占用
  • ​事件解绑：组件卸载时移除resize监听
  • ​定时器清理：防抖处理中及时清理定时器

5. 交互优化

  • ​悬浮按钮：点击增加"按压反馈"效果

参数说明表

参数名 类型 默认值 说明
src String - ​必填 图标资源路径
width String/Number '140rpx' 按钮宽度，支持格式：120rpx/50%/100（px值）
height String/Number '140rpx' 按钮高度，格式同width
initialRight String/Number '0rpx' 初始右侧位置，百分比基于屏幕宽度
initialTop String/Number '30%' 初始顶部位置，百分比基于屏幕高度
clickThreshold Number 8 点击识别阈值（单位：px），移动距离小于该值触发点击
stickOffset String/Number '0rpx' 贴边偏移量，支持负值可实现贴边隐藏效果
imageMode String 'scaleToFill' 图片裁剪模式，同uni-app image组件mode属性
verticalStick Boolean false 是否启用垂直贴边，开启后上下也会贴边

单位支持说明

  • ​百分比单位：30% 基于屏幕尺寸计算
  • ​rpx单位：140rpx 自动转换为px
  • ​像素单位：直接数字值或100px格式
  • ​混合使用：不同属性可混用单位，如：
    :width="100" initial-right="10%"

注意事项

  1. ​贴边偏移量：负值示例 -20rpx 可实现按钮部分隐藏效果
  2. ​点击判定：实际阈值计算使用曼哈顿距离（X+Y绝对值之和）
  3. ​性能敏感参数：频繁修改width/height可能影响性能
  4. ​层级问题：固定z-index为9999，必要时可通过外部样式覆盖
  5. ​平台差异：iOS端可能需要添加-webkit-backdrop-filter兼容

使用示例


<FloatingButton
  src="/static/icon.png"
  width="140rpx"
  height="140rpx"
  :vertical-stick="true"
  @click="handleButtonClick"
/>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...