HarmonyOS List组件,单行横向排列,怎么让内容展示不全的项不显示?

clean及rebuild project后,当lablel有1项、2项时,上下滚动label仍会被吃掉一项,如第一项【5个案例】上下滑动会不见掉。

HarmonyOS List组件,单行横向排列,怎么让内容展示不全的项不显示? -鸿蒙开发者社区

HarmonyOS List组件,单行横向排列,怎么让内容展示不全的项不显示? -鸿蒙开发者社区

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

可以参考下以下demo:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-size-change-event-V5#onsizechange

build() {
  Column() {
    List({ space: 10 }) {
      ForEach(this.shopArray, (item: ShopBean, index: number) => {
        ListItem() {
          Row() {
            Text(item.shopName)
              .width(50)
              .height(50)
              .backgroundColor('#55ff00ff')

            //LabelItemComponent({ shopBean: item, shopBeanIndex: index, indexListParent: $indexList })

            List({ space: 5 }) {
              ForEach(item.labelArray, (lb: LabelBean, lbIndex: number) => {
                ListItem() {
                  ZzxLabelItemComponent({ labelBean: lb })
                }
                .visibility(this.str[index] === lbIndex?Visibility.Hidden:Visibility.Visible)
                .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
                  // console.info(`:::Ace: on size change, oldValue is ${JSON.stringify(oldValue)} newValue is ${JSON.stringify(newValue)}`)
                  //325.76为父组件的宽度,从父组件onSizeChange获取
                  if (this.num[index]>(325.76-50)) {
                    return
                  }
                  if (this.num[index]<=(325.76-50)||this.num[index] == null) {
                    if (this.num[index] == null) {
                      this.num[index] =0
                    }
                    this.num[index]= this.num[index]+ Number(newValue.width)
                    console.log(':::',Number(newValue.width));
                  }

                  if (this.num[index]>(325.76-50)) {
                    this.str[index] = lbIndex
                  }
                  console.log(':::onSizeChange',JSON.stringify(this.num),JSON.stringify(this.str),'lbIndex',lbIndex,'index',index,`newValue is ${JSON.stringify(newValue)}`)
                })
              }, (lb: LabelBean) => JSON.stringify(lb.id)+Date.now())
            }
            .layoutWeight(1)
            .onScrollFrameBegin(() => {
              return { offsetRemain: 0 }
            })
            .scrollBar(BarState.Off)
            .margin({ left: 10, top: 6 })
            .listDirection(Axis.Horizontal)
          }
          .backgroundColor(Color.White)
          .width('100%')
        }
      }, (item: ShopBean) => JSON.stringify(item.id))
    }

    .onScrollStart(() => {
      console.log('Test Text isVisible : onScrollStart')
    })
    .onScrollStop(() => {
      console.log('Test Text isVisible : onScrollStop')
    })
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
  }
  .padding(10)
  .backgroundColor(Color.Gray)
  .height('100%')
  .width('100%')
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS List展示不全问题
438浏览 • 1回复 待解决
List列表组件如何改为横向显示
1085浏览 • 1回复 待解决
HarmonyOS PullToRefresh嵌套List显示不全
123浏览 • 1回复 待解决
HarmonyOS webloadData不显示内容
156浏览 • 1回复 待解决
HarmonyOS 输入框不显示内容
205浏览 • 1回复 待解决
HarmonyOS Slider组件气泡提示显示不全
279浏览 • 1回复 待解决
HarmonyOS 读取内容不全
18浏览 • 1回复 待解决
Scroll组件显示不全问题
1307浏览 • 1回复 待解决
js如何把list组件设置为横向
4125浏览 • 1回复 待解决
HarmonyOS web显示不全
671浏览 • 1回复 待解决
HarmonyOS Web组件不显示图片
24浏览 • 1回复 待解决
HarmonyOS 键盘导致webview展示不全
127浏览 • 1回复 待解决
HarmonyOS 自动横向滚动List
247浏览 • 1回复 待解决
HarmonyOS web组件alert不显示
938浏览 • 1回复 待解决