基于Taro的移动端H5的悬浮按钮(可拖动)

最新推荐文章于 2025-10-22 00:36:33 发布

原创

最新推荐文章于 2025-10-22 00:36:33 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何在Taro移动端H5项目中创建一个可拖动的悬浮按钮，通过onTouchStart、onTouchMove和onTouchEnd事件实现拖动效果。代码示例包括Taro和原生JS两种实现方式。

今天工作时遇到了一个需求，要去做一个可拖动的悬浮按钮。
查找了资料发现了一个文章然后根据内容进行修改。
添加链接描述
效果图大概是这个样子，然后可以在界面上拖动。
在这里插入图片描述
因为是taro的项目，所以下面的代码是基于taro实现的，最后边会给出原生js的实现代码，如果有错误的地方希望指正出来进行修改。

首先是render部分，
拖动的事件分布为：onTouchStart(开始拖动执行的事件)，onTouchMove(拖动时执行的事件)，onTouchEnd(拖动结束执行的事件)
首先先给view设置固定定位fixed,然后通过控制left和top的属性来设置位置

render() {
  return (
       <View
           className="t-suspend-button"
           onClick={this.handleClick.bind(this)}
           onTouchStart={e => this.onTouchStart(e)}
           onTouchMove={e => this.onTouchMove(e)}
           onTouchEnd={e => this.onTouchEnd(e)}
           style={
  
  {
           	position: fixed;
               left: `${this.state.oLeft}px`,
               top: `${this.state.oTop}px`
           }}
       >