HarmonyOS 首页使用自定义组件position位置实现滚动,如果组件里还有list,嵌套滚动怎么实现?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

请参考demo:

@Entry
@Component
struct ScrollAndList {
  @State message: string = 'Hello World';
  @State y:number=-500;
  touchY:number=0;
  nums:number[]=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]
  onTouchStopPropagation:boolean=true;

  build() {
    Column() {
      Column() {

      }
      .backgroundColor(Color.Pink)
      .width('100%')
      .height(500)
      .position({ x: 0, y: this.y })

      Column() {
        List() {
          ForEach(this.nums, (item: number) => {

            ListItem() {
              Text(item.toString())
                .height(100)
            }
          })
        }
        .edgeEffect(EdgeEffect.None)
        .onWillScroll((scrollOffset: number, scrollState: ScrollState) => {
          if(scrollOffset!=0){
            this.onTouchStopPropagation=true
          }
          if(this.y!=-500){
            return {offsetRemain:0}
          }
          return null
        })
        .onReachStart(()=>{
          this.onTouchStopPropagation=false
        })
      }
      .backgroundColor(Color.Green)
      .width('100%')
      .height('100%')
      .position({ x: 0, y: this.y + 500 })
      .onTouch((event: TouchEvent) => {
        if(this.onTouchStopPropagation&&this.y==-500){
          event.stopPropagation()
        }
      })

    }.onTouch((event: TouchEvent) => {
      switch (event.type) {
        case TouchType.Down: {
          this.touchY = event.touches[0].y;
          // console.log(`this.touchY is ${this.touchY}`)
          break;
        }
        case TouchType.Move: {
          let juli=this.y+(event.touches[0].y - this.touchY)/100
          this.y = juli>=-500?juli:-500
          // console.log(`this.y is ${this.y}`)
          break;
        }
        case TouchType.Up: {
          if (this.y > -250) {
            this.y = 0;
            break;
          }
          this.y = -500;
          break;
        }
        default: {
          break;
        }
      }
    })
    .height('100%')
    .width('100%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
如何实现嵌套滚动技术
1120浏览 • 1回复 待解决
HarmonyOS使用Web组件如何监听滚动位置
619浏览 • 2回复 待解决
自定义组件嵌套组件
9555浏览 • 3回复 待解决
HarmonyOS List组件滚动监听
61浏览 • 1回复 待解决
如何获取List组件滚动滚动的距离
2599浏览 • 1回复 待解决
自定义组件使用watch监听
512浏览 • 1回复 待解决
HarmonyOS list组件点击后,滚动居中
29浏览 • 1回复 待解决
HarmonyOS CoverFlow效果自定义组件实现
300浏览 • 1回复 待解决
list组件无法滚动到底部
1307浏览 • 1回复 待解决
组件自定义回调函数实现
461浏览 • 1回复 待解决