更新记录

0.0.2（2025-03-12）

• chore: 更新文档

0.0.1（2025-03-07）

• init

平台兼容性

lime-gesture 手势库

安装

插件市场导入即可

代码演示

<view ref="boxRef" class="box" style="background-color: #44bd87;"></view>

import { useGesture, type GestureOptions } from '@/uni_modules/lime-gesture'

const boxRef = ref<UniElement | null>(null)

const translateX = ref(0)
const translateY = ref(0)
const scale = ref(1)
const rotation = ref(0)

const gesture = useGesture(boxRef, {
    //缩放
    onPinch(zoom : number, _evt : UniTouchEvent) {
        scale.value = Math.min(Math.max(zoom, 0.5), 5)
    },
    // 旋转
    onRotate(angle : number, _evt : UniTouchEvent) {
        rotation.value += angle
    },
    // 单指移动
    onPressMove(delta, _evt : UniTouchEvent) {
        translateX.value += delta["deltaX"] as number
        translateY.value += delta["deltaY"] as number
    },
    // 双指移动
    onTwoPressMove(delta, _evt : UniTouchEvent) {
        translateX.value += delta["deltaX"] as number
        translateY.value += delta["deltaY"] as number
    }
} as GestureOptions)

// 给元素绑定加上
watchEffect(() => {
    if (boxRef.value == null) return
    boxRef.value!.style.setProperty('transform', `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value}) rotate(${rotation.value}deg)`)
})

手动模式

某些环境不支持给绑定事件，给useGesture第一个参数传入null，手动传递触摸事件（适用于复杂场景）：

<view 
    ref="boxRef" 
    class="box" 
    style="background-color: #44bd87;"
    @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
</view>

const boxRef = ref<UniElement | null>(null)
const gesture = useGesture(null, {
    //缩放
    onPinch(zoom : number, _evt : UniTouchEvent) {
        scale.value = Math.min(Math.max(zoom, 0.5), 5)
    },
    // 旋转
    onRotate(angle : number, _evt : UniTouchEvent) {
        rotation.value += angle
    },
    // 单指移动
    onPressMove(delta, _evt : UniTouchEvent) {
        translateX.value += delta["deltaX"] as number
        translateY.value += delta["deltaY"] as number
    },
    // 双指移动
    onTwoPressMove(delta, _evt : UniTouchEvent) {
        translateX.value += delta["deltaX"] as number
        translateY.value += delta["deltaY"] as number
    }
} as GestureOptions)

// 传入开始事件
const touchstart = (e : UniTouchEvent) => {
    gesture.start(e)
}
// 传入移动事件
const touchmove = (e : UniTouchEvent) => {
    e.preventDefault()
    finger.move(e)
}
// 传入移动结束事件
const touchend = (e : UniTouchEvent) => {
    finger.end(e)
}

// 给元素绑定加上
watchEffect(() => {
    if (boxRef.value == null) return
    boxRef.value!.style.setProperty('transform', `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value}) rotate(${rotation.value}deg)`)
})

状态对象 (GestureState)

interface GestureState {
  scale: number        // 当前缩放比例
  angle: number        // 累计旋转角度
  deltaX: number       // X轴瞬时位移
  deltaY: number       // Y轴瞬时位移
  isDoubleTap: boolean // 是否为双击
  swipeDirection: 'Left' | 'Right' | 'Up' | 'Down' | null
}

⚙️ 配置选项 (GestureOptions)