LimeUI+1.2.0

主题

LimeGesture 手势库组件 ​

一个功能强大的手势处理库，支持旋转、缩放、滑动等多种触摸交互。适用于需要实现拖拽、缩放、旋转等复杂手势交互的场景，如图片编辑器、地图操作、画布交互等。组件提供了丰富的事件回调和状态管理，可以满足各种复杂的交互需求。

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-gesture
  2. UniApp只能源码运行
  3. UniAppX中安卓/iOS可以自定义基座，其它端需要源码运行

代码演示 ​

基础用法 ​

通过引用元素实现旋转、缩放和移动功能。

html
<view ref="boxRef" class="box" style="background-color: #44bd87;"></view>
js
import { useGesture, type GestureOptions } from '@/uni_modules/lime-gesture'

const boxRef = ref(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)`)
})

手动模式 ​

在某些环境不支持直接绑定事件的情况下，可以手动传递触摸事件。

html
<view 
  ref="boxRef" 
  class="box" 
  style="background-color: #44bd87;"
  @touchstart="touchstart" 
  @touchmove="touchmove" 
  @touchend="touchend">
</view>
js
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 touchstartt = (e : UniTouchEvent) => {
  gesture.start(e)
}
// 传入移动事件
const touchmovet = (e : UniTouchEvent) => {
  e.preventDefault()
  gesture.move(e)
}
// 传入移动结束事件
const touchendt = (e : UniTouchEvent) => {
  gesture.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)`)
})

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-gesture/components/lime-gesture -->
<lime-gesture />

插件标签说明 ​

标签名说明
l-gesture组件标签
lime-gesture演示标签

Vue2使用说明 ​

main.js中添加以下代码：

js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档 ​

状态对象 (GestureState) ​

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

配置选项 (GestureOptions) ​

属性名类型触发时机参数说明
onRotate(angle: number, evt: UniTouchEvent) => void双指旋转时持续触发angle: 旋转角度（相对上次变化量，单位：度）
evt: 原始触摸事件对象
onPinch(scale: number, evt: UniTouchEvent) => void双指缩放时持续触发scale: 缩放比例（相对初始距离的倍数）
evt: 原始触摸事件对象
onSwipe(direction: 'Left'|'Right'|'Up'|'Down', evt: UniTouchEvent) => void快速滑动结束时触发（速度>30px/300ms）direction: 滑动方向
evt: 原始触摸事件对象
onTap(evt: UniTouchEvent) => void单击结束时触发evt: 原始触摸事件对象
onDoubleTap(evt: UniTouchEvent) => void快速双击时触发（间隔<250ms）evt: 原始触摸事件对象
onLongTap(evt: UniTouchEvent) => void长按超过750ms时触发evt: 原始触摸事件对象
onSingleTap(evt: UniTouchEvent) => void单击未被双击覆盖时触发（延迟250ms触发）evt: 原始触摸事件对象
onPressMove(delta: UTSJSONObject, evt: UniTouchEvent) => void单指拖拽时持续触发delta: 包含 deltaX/deltaY 的位移对象
evt: 原始触摸事件对象
onTwoPressMove(delta: UTSJSONObject, evt: UniTouchEvent) => void双指拖拽时持续触发delta: 包含 deltaX/deltaY 的位移对象
evt: 原始触摸事件对象
onTouchStart(evt: UniTouchEvent) => void触摸开始时触发evt: 原始触摸事件对象
onTouchMove(evt: UniTouchEvent) => void触摸移动时触发evt: 原始触摸事件对象
onTouchEnd(evt: UniTouchEvent) => void触摸结束时触发evt: 原始触摸事件对象
onTouchCancel(evt: UniTouchEvent) => void触摸被系统取消时触发（如来电打断）evt: 原始触摸事件对象
onMultipointStart(evt: UniTouchEvent) => void从单点触摸变为多点触摸时触发evt: 原始触摸事件对象
onMultipointEnd(evt: UniTouchEvent) => void从多点触摸变为单点/无触摸时触发evt: 原始触摸事件对象

方法 ​

方法名说明参数
start手动模式下处理触摸开始事件(evt: UniTouchEvent) => void
move手动模式下处理触摸移动事件(evt: UniTouchEvent) => void
end手动模式下处理触摸结束事件(evt: UniTouchEvent) => void
cancel手动模式下处理触摸取消事件(evt: UniTouchEvent) => void

常见问题 ​

  • 在某些平台上可能需要阻止默认的触摸行为，可以在touchmove事件中调用e.preventDefault()
  • 手势识别的精度可能受设备性能和触摸屏质量的影响
  • 复杂手势组合（如同时旋转和缩放）在某些低端设备上可能会有性能问题

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码