更新记录

0.0.5（2025-05-06）

• fix： 缩放不保存的问题

0.0.4（2025-05-06）

• fix 修复vue3引入问题

0.0.3（2025-05-06）

• feat 更换目录

平台兼容性

uni-app(4.44)

uni-app x(4.61)

其他

lime-gesture 手势库

手势处理函数，支持旋转、缩放、滑动等触摸交互。

文档

🚀 gesture【站点1】 🌍 gesture【站点2】 🔥 gesture【站点3】

安装

插件市场导入即可，uniapp 只能源码运行。uniappx 安卓/ios可以自定义基座，其它端需要源码

代码演示

<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)