组件实现未占满时自定义footer贴底显示

商品列表,当某个商品列表为空时,底部可以显示商品数量的自定义组件。

HarmonyOS
2024-05-23 23:36:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
hz3000

使用的核心API

List() 
  .onAreaChange() 
Scroller() 
  .getItemRect()

核心代码解释

@Entry 
@Component 
struct RefreshExample { 
  // 刷新组件刷新状态 
  @State isRefreshing: boolean = false 
  // 数据源 
  @State arr: String[] =['600','121221'] 
  // List父组件高度,在父组件onAreaChange时刷新 
  @State parentHeight:number = 0 
  // List组件中最后一个元素的y坐标(footer自定义组件) 
  @State endPointY:number = 0 
  // List组件中最后一个元素的默认高度(footer自定义组件) 
  @State endHeight:number = 100 
  // List组件绑定Scroller控制器 
  scroller:Scroller = new Scroller() 
  build() { 
    Column() { 
      Refresh({ refreshing: $$this.isRefreshing}) { 
        List({scroller:this.scroller}) { 
          // 自定义ListItem作为Header 
          ListItem() { 
            Text('我是header') 
              .width('100%').height('100%').fontSize(16) 
              .textAlign(TextAlign.Center).backgroundColor(Color.White) 
          }.height(200).onClick(()=>{ 
            this.arr.push('' + this.arr.length + 1) 
          }) 
          // 加载数据源 
          ForEach(this.arr, (item: string) => { 
            ListItem() { 
              Text('' + item) 
                .width('100%').height(100).fontSize(16) 
                .textAlign(TextAlign.Center).backgroundColor(Color.White) 
            } 
          }, (item: string) => item) 
          // 自定义ListItem作为Footer,未占满List时贴底自定义组件 
          ListItem() { 
            Column(){ 
              Text('我是footer') 
                .width('100%').height(100).fontSize(16) 
                .textAlign(TextAlign.Center).backgroundColor(Color.White) 
            }.justifyContent(FlexAlign.End).height('100%') 
            }.height(this.endHeight) 
            .constraintSize({minHeight:100}) 
            .backgroundColor(Color.White) 
          .onAreaChange((oldValue: Area, newValue: Area)=>{ 
            console.log('footer item onAreaChange' ) 
          }) 
        } 
        // 当滑动到顶部时,获取最后一个ListItem(footer)的y坐标,结合parentHeight高度计算预期高度 
        .onReachStart(()=>{ 
          this.endPointY = px2vp(this.scroller.getItemRect(this.arr.length).y) 
          if(this.endPointY == 0) this.endPointY = this.parentHeight 
          if((this.endPointY + 100) < this.parentHeight) { 
            this.endHeight = this.parentHeight - this.endPointY - 100 
          } 
          console.log('list onReachStart' +  this.endPointY ) 
        }) 
        .backgroundColor(Color.Black) 
        .height('100%') 
        .onScrollIndex((first: number) => { 
          console.info(first.toString()) 
        }) 
        .width('100%') 
        .height('100%') 
        .divider({strokeWidth:0.5,color:Color.Gray}) 
        .scrollBar(BarState.Off) 
      } 
      .onStateChange((refreshStatus: RefreshStatus) => { 
      }) 
      .onRefreshing(() => { 
        setTimeout(() => { 
          this.isRefreshing = false 
        }, 2000) 
      }) 
      .backgroundColor(0x89CFF0) 
      // 在List父组件Area变化时,获取parentHeight高度 
      .onAreaChange( (oldValue: Area, newValue: Area) =>{ 
        this.parentHeight = Number(newValue.height) 
        if(this.endPointY == 0) this.endPointY = this.parentHeight 
        if((this.endPointY + 100) < this.parentHeight) { 
          this.endHeight = this.parentHeight - this.endPointY - 100 
        } 
        console.log('parent onAreaChange ' + newValue.height.toString()) 
      }) 
    } 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-24 23:22:24
相关问题
自定义组件嵌套子组件
8078浏览 • 3回复 待解决
如何自定义模拟Tabs组件
429浏览 • 1回复 待解决
如何自定义组件原型菜单
471浏览 • 1回复 待解决
ArkTs如何自定义容器组件
1792浏览 • 1回复 待解决
自定义弹窗自定义转场动画
456浏览 • 1回复 待解决
如何设置自定义组件height缺省
678浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4710浏览 • 2回复 待解决
自定义组件中如何添加图片?
1294浏览 • 1回复 待解决
自定义组件如何导出、引入?
1066浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
7386浏览 • 1回复 待解决
Grid组件的scrollBar是否支持自定义
1027浏览 • 1回复 待解决
自定义组件什么时候销毁
785浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
993浏览 • 1回复 待解决
如何实现H5自定义事件
871浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人