悬浮按钮，谁家没有悬浮按钮，就是不好用

前端

2023-12-22 11:54:50

小程序悬浮按钮的全面指南

在当今智能手机时代，屏幕尺寸不断增大，导致一个普遍问题：位于屏幕顶端和底部的按钮难以触及。悬浮按钮 应运而生，成为解决此难题的理想方案。本文将深入探讨小程序悬浮按钮的实现原理、特性和开源解决方案。

实现原理

小程序悬浮按钮本质上是一个position:fixed 的视图，通过小程序API实现拖动功能。它的位置不受页面滚动影响，始终悬停在页面之上。

特性

一个全面的悬浮按钮应具备以下特性：

可控位置： 允许用户任意拖动按钮，并将其固定在屏幕边缘。
透明度控制： 可调整按钮透明度，以适应不同背景。
自定义动画： 支持自定义拖拽动画，增强用户体验。
多功能操作： 可配置为返回键、快捷键或其他操作。
脚本编写： 允许用户与不同软件交互。

开源解决方案

以下是一个开源的小程序悬浮按钮组件，提供了全面的特性：

https://github.com/yang68499/buttonFloat

代码示例

// 创建悬浮按钮
const floatBtn = document.createElement('div')
floatBtn.classList.add('float-btn')
document.body.appendChild(floatBtn)

// 设置按钮事件监听器
floatBtn.addEventListener('touchstart', start)
floatBtn.addEventListener('touchend', end)
floatBtn.addEventListener('touchmove', animate)

// 开始拖动
function start(e) {
  offset.x = e.touches[0].clientX - floatBtn.left
  offset.y = e.touches[0].clientY - floatBtn.top
  document.addEventListener('touchmove', move)
}

// 结束拖动
function end(e) {
  document.removeEventListener('touchmove', move)
}

// 移动按钮
function move(e) {
  floatBtn.left = e.touches[0].clientX - offset.x
  floatBtn.top = e.touches[0].clientY - offset.y
}

// 动画
function animate(e) {
  if (!animating) {
    animating = true
    requestAnimationFrame(frame)
  }
}

function frame() {
  // 计算按钮的新位置
  floatBtn.left += (offset.x - floatBtn.left) * 0.1
  floatBtn.top += (offset.y - floatBtn.top) * 0.1

  // 判断是否停止动画
  if (Math.abs(floatBtn.left - offset.x) < 1 && Math.abs(floatBtn.top - offset.y) < 1) {
    animating = false
  } else {
    requestAnimationFrame(frame)
  }
}