重点: 在组件上添加.gesture属性;
实现效果:
具体写法:
...省略代码
build() {
Navigation() {
Column({ space: 10 }) {
Text('这是第二页')
}
.constraintSize({ minHeight: '100%' })
}
.title('第二页')
.titleMode(NavigationTitleMode.Mini)
.gesture(
//加载滑动手势
SwipeGesture({direction: SwipeDirection.Horizontal })
.onAction((event:GestureEvent)=>{
router.back()
})
)
}
其他gesture手势功能实现:
gesture 常规手势
参考代码：
@Entry
@Component
struct Test03 {
build() {
Column() {
Text('常规手势').fontSize(28)
.gesture(
//加载单击手势
TapGesture()
.onAction(() => {
console.info('单击事件。。。。');
}))
}
.height(200)
.width(250)
}
}
LongPressGesture 长按手势
是指用户在屏幕上长时间按住一个元素或者某个区域，触发的手势操作。
长按手势通常用于实现某些特定的功能，比如弹出菜单、编辑文本、删除元素等。
长按手势的触发时间通常比较长，根据不同的应用场景，可以设置触发长按手势所需的最小按住时间。
包括以下几个阶段：
- 按下（Touch Down）：用户按住屏幕上一个元素或者某个区域。
- 按住（Touch Hold）：用户持续按住屏幕，一般在这个阶段内可以实现一些操作，比如拖动元素、改变元素的位置等。
- 触发（Touch Up Inside）：用户松开手指，如果在按住阶段内达到某个条件，则会触发相应的操作，比如弹出菜单。
@Entry
@Component
struct Test03 {
@State count: number = 0;
build() {
Column() {
Text('长按 累加次数:' + this.count).fontSize(28)
.gesture(
// repeat: true 重复触发的LongPressGesture
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
console.log(`${JSON.stringify(event)}`)
// {"repeat":true,"offsetX":0,"offsetY":0,"scale":1,"angle":0,"speed":0,"timestamp":0,"globalX":174,"globalY":16.666666666666668,"localX":33.666666666666664,"localY":16.666666666666668,"pinchCenterX":0,"pinchCenterY":0,"source":0,"pressure":0,"sourceTool":0,"fingerList":[{"id":1,"globalX":174,"globalY":16.666666666666668,"localX":33.666666666666664,"localY":16.666666666666668}],"target":{"area":{"position":{"x":0,"y":0},"globalPosition":{"x":0,"y":0},"width":0,"height":0}}}
//每重复一次，累加一次
if (event.repeat) {
this.count++;
}
})
.onActionEnd(() => {
this.count = 0;
})
)
}
.height("100%")
.width("100%")
}
}
其他gesture各手势功能参考如下链接:
