是否支持事件拦截机制,以及实现效果有什么好的建议?

横向的swiper和外部嵌套的row都处理了滑动事件。但是我期望滑到右边缘时,如果手指向左继续滑动则只响应row的滑动事件,展示swiper后面的“松开查看详情”按钮。如果手指向右滑动,则指响应swiper的滑动事件。但事实是,他们都能接收到事件。

HarmonyOS
2024-10-08 11:41:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

参考以下demo实现:

@Entry  
@Component  
struct Index {  
  @State list: number[] = [1, 2, 3];  
  private swiperController: SwiperController = new SwiperController()  
  innerScroller: Scroller = new Scroller;  
  outsideScroller: Scroller = new Scroller;  
  @State viewMoreText: string = '左滑查看图文详情'  
  @State jumpToDetail:boolean = false;  
  
  build() {  
    Scroll(this.outsideScroller) {  
      Column() {  
        Scroll(this.innerScroller) {  
          Row() {  
            Swiper(this.swiperController) {  
              ForEach(this.list, (item: number) => {  
                Text(`item ${item}`)  
                  .width(400)  
                  .fontSize(40)  
                  .textAlign(TextAlign.Center)  
                  .backgroundColor('#ccc')  
                  .height(200)  
              })  
            }  
            .width(400)  
            .loop(false)  
            .effectMode(EdgeEffect.None)  
            .nestedScroll(SwiperNestedScrollMode.SELF_FIRST)  
  
            Text(this.viewMoreText).width(30)  
          }  
          .height(300)  
          .justifyContent(FlexAlign.Start)  
        }  
        .scrollable(ScrollDirection.Horizontal)  
        .scrollBar(BarState.Off)  
        .edgeEffect(EdgeEffect.Spring)  
        .backgroundColor(Color.Green)  
        .onScroll((xOffset: number, yOffset: number) => {  
          console.log('cur:::'+this.innerScroller.currentOffset().xOffset)  
          if(this.innerScroller.currentOffset().xOffset > 50){  
            this.jumpToDetail = true;  
          }  
        })  
        .onScrollStop(()=>{  
          if(this.jumpToDetail){  
            this.innerScroller.scrollEdge(Edge.Start)  
            this.outsideScroller.scrollTo({ xOffset: 0, yOffset: 300, animation: { duration: 50 } })  
          }  
        })  
        Row() {  
          Text('商品详情')  
        }.backgroundColor(Color.Pink).height(1000).width('100%').alignItems(VerticalAlign.Top)  
      }  
      .alignItems(HorizontalAlign.Center)  
      .justifyContent(FlexAlign.Center)  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-08 17:00:20
相关问题
是否有一对多事件传递机制
1959浏览 • 1回复 待解决
Scrollerfling实现什么方案
762浏览 • 1回复 待解决
WebView goBack事件拦截
1037浏览 • 1回复 待解决
有谁知道是否支持实现3D效果
1907浏览 • 1回复 待解决
HarmonyOS如何拦截list滑动事件
332浏览 • 1回复 待解决
Slider拦截点击事件失败
260浏览 • 1回复 待解决
如何拦截onTouch事件传递
645浏览 • 1回复 待解决
是否可以实现滚动锚定效果
807浏览 • 1回复 待解决
建议开发使用什么单位
1836浏览 • 1回复 待解决
鸿蒙事件拦截分发处理
10409浏览 • 2回复 待解决
#鸿蒙通关秘籍#List事件处理机制
31浏览 • 1回复 待解决