Taro项目实现一个在页面内自由拖拽的滑块，仿苹果手机的辅助按钮

一下子就醒了

于 2021-06-08 19:14:15 发布

阅读量1.3k

点赞数 3

分类专栏： Taro 文章标签： taro

本文链接：https://blog.csdn.net/weixin_42442713/article/details/117713844

版权

本文介绍如何在Taro项目中实现一个类似苹果手机辅助按钮的可自由拖拽滑块，该滑块在释放时会自动吸附到边缘。组件代码和使用方法已提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：自由拖拽，松手会自动吸附到边上

组件代码：

import { EventProps, ITouchEvent, View } from '@tarojs/components'
import { getSystemInfoSync } from '@tarojs/taro'
import { clamp } from 'lodash'
import React, { CSSProperties, FC, useEffect, useState } from 'react'

let start: EventProps['onTouchStart']
let move: EventProps['onTouchMove']
let end: EventProps['onTouchEnd']

/** 来自父组件的主动cancel，因为本组件无法百分比捕捉到touchEnd事件 */
export const cancelDrag = (e: any) => {
  end && end(e)
}

interface DraggableProps {
  width: string
  height: string
  /** 初始left值 */
  defaultLeft?: number
  /** 初始top值 */
  defaultTop?: number
  /** 上面收紧多少 */
  marginTop?: number
  /** 右边收紧多少 */
  marginRight?: number
  /** 下边收紧多少 */
  marginBottom?: number
  /** 左边收紧多少 */
  marginLeft?: number
  /** 只能垂直移动 */
  vertical?: boolean
  /** 只能水平移动 */
  horizontal?: boolean
  /** 默认左边 */
  left?: boolean
  /** 默认右边 */
  right?: boolean
  /** 默认上边 */
  top?: boolean
  /** 默认下边 */
  bottom?: bool