HarmonyOS 鸿蒙Next swiper 手势和pan手势放在一块为什么一直只会触发swiper
HarmonyOS 鸿蒙Next swiper 手势和pan手势放在一块为什么一直只会触发swiper
swiper 手势和pan手势放在一块为什么一直只会触发swiper手势
 
项目里面同时放了swiper和pan手势,swiper轻扫手势, pan是平移手势,但是不管轻扫还是缓慢平移拖动,都是只触发了pan 手势
项目里面需要的场景:一个滑块,触发翻页有2种方式:1.pan平移时候,平移50%触发翻页,2.swiper轻扫进行翻页
项目里面同时放了swiper和pan手势,swiper轻扫手势, pan是平移手势,但是不管轻扫还是缓慢平移拖动,都是只触发了pan 手势
项目里面需要的场景:一个滑块,触发翻页有2种方式:1.pan平移时候,平移50%触发翻页,2.swiper轻扫进行翻页
        
          2 回复
        
      
      
        import { DownloadImage } from './DownloadImage';
import { fileUri } from '[@kit](/user/kit).CoreFileKit';
import { display } from '[@kit](/user/kit).ArkUI';
import { BusinessError } from '[@kit](/user/kit).BasicServicesKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) message: string = 'Hello World';
  [@State](/user/State) imagePath: string = ''
  [@State](/user/State) rotateAngle: number = 0
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
  private time: number = 0
  build() {
    Column() {
      Image(this.imagePath)
        .width(100)
        .height(100)
      Swiper() {
        Row()
          .backgroundColor(Color.Red)
          .width('100%')
          .height('100%')
        Row()
          .backgroundColor(Color.Green)
          .width('100%')
          .height('100%')
        Row()
          .backgroundColor(Color.Blue)
          .width('100%')
          .height('100%')
        Row()
          .backgroundColor(Color.Yellow)
          .width('100%')
          .height('100%')
        Row()
          .backgroundColor(Color.Brown)
          .width('100%')
          .height('100%')
      }
      // .itemSpace(10)
      .nextMargin(100)
      .width('100%')
      .height(100)
      .displayCount(3)
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          // DownloadImage.downLoadGifImage('https://a3.eastbuy.com/eastbuy-jigsaw-o-service/common/3392296480620670/77736060f0d8f444778a1e8ebe3aa80c_wh1430x2532.jpg?image_process=format,jpg',(imagePath:string)=>{
          DownloadImage.downLoadGifImage('https://a3.eastbuy.com/eastbuy-jigsaw-o-service/common/2777012814291010/5767b678fdb67849c1ef2d8f5bb82274_wh885x1200.gif?width=885&height=1200',
            (imagePath: string) => {
              let uri = fileUri.getUriFromPath(imagePath);
              this.imagePath = uri
            }, (err: Error) => {
            })
        })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .rotate({ angle: this.rotateAngle })
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        PanGesture(this.panOption).onActionStart((event: GestureEvent) => {
          console.info('Pan start')
          this.time = new Date().getTime()
          // new Date()
        }).onActionUpdate((event: GestureEvent) => {
          if (event) {
          }
        }).onActionEnd(async (event: GestureEvent) => {
          console.info('Pan end')
          // 结束时间
          // 拿到距
          let data = await display.getAllDisplays()
          const ratio = (vp2px(Math.abs(event.offsetX)) / data[0].width)
          let t = (new Date().getTime() - this.time) / 1000
          let v = Math.abs(event.offsetX) / t
          console.log(v.toString())
          if (ratio < 0.5 && v < 100) {
            console.log("不翻")
          } else if (ratio <= 0.5 && v > 100) {
            console.log("翻")
          } else if (ratio >= 0.5) {
            console.log("翻")
          }
        }),
      ).onCancel(() => {
        console.info('sequence gesture canceled')
      })
    )
  }
}更多关于HarmonyOS 鸿蒙Next swiper 手势和pan手势放在一块为什么一直只会触发swiper的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,当swiper手势和pan手势同时存在时,由于手势事件的分发与消费机制,可能会导致swiper手势优先触发,而子组件的pan手势无法正常工作。这主要是因为默认情况下,子组件的手势识别优先级高于父组件(swiper)的条件较为有限,通常仅当子组件未处理手势时,父组件才有机会响应。
要解决这个问题,可以尝试以下方法:
- 设置手势优先级:在swiper上设置
priorityGesture属性,使得swiper在特定手势(如滑动)上具有更高的优先级。这可以通过配置手势识别器的优先级或重写事件处理逻辑来实现。 - 事件拦截与条件判断:在子组件的pan手势事件处理中,加入条件判断逻辑。如果检测到swiper正在滑动,则不处理pan手势事件,从而允许swiper手势正常触发。
 
通过上述方法,你可以尝试解决HarmonyOS鸿蒙Next中swiper与pan手势的冲突问题。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。
        
      
                  
                  
                  
