HarmonyOS鸿蒙Next中切换TabContent List的scroller不跟随Tab切换
HarmonyOS鸿蒙Next中切换TabContent List的scroller不跟随Tab切换 点击行程服务Tab，滚动列表到最下面，然后点击"上去"按钮之后再把列表滚动到最下面，再切回到促销活动滚动列表到最下面，促销活动的列表不能回到最上面，而行程服务回到最上面了
问题是:
-
如何能获取到当前tabcontent 下 LIST 对应的 scroller
-
目前只能把LIST使用 struct 自定义才能正常分别控制不同列表，是否每个struct都会占用一份内存
参考以下：
关键代码片段1： @Builder listBuilder(listName: ResourceStr, tabName: ResourceStr, index: number,scroll: Scroller) { TabContent() { // niubiView(); Stack({ alignContent: Alignment.BottomEnd }) {
List({ space: CommonConstants.LIST_SPACE, scroller: scroll }) {
ForEach(listArr, (item: string) => {
ListItem() {
Row() {
Text('dfdf')
.fontSize($r('app.float.middle_font_size'))
.fontWeight(CommonConstants.FONT_WEIGHT_FIVE)
Text(item)
.fontSize($r('app.float.middle_font_size'))
.fontWeight(CommonConstants.FONT_WEIGHT_FIVE)
}
.padding({ left: $r('app.float.list_item_padding') })
.backgroundColor(Color.White)
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.borderRadius($r('app.float.list_item_radius'))
}
.width(CommonConstants.FULL_WIDTH)
.height($r('app.float.list_item_height'))
}, (item: string) => JSON.stringify(item)+Math.random())
}
.padding({
left: $r('app.float.list_padding'),
right: $r('app.float.list_padding')
})
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
Row() {
Button('上去')
.width(60)
.height(60)
.opacity(0.8)
}
.justifyContent(FlexAlign.Center)
.width(48)
.height(48)
.borderRadius(36)
.margin({ right: 36, bottom: 12 })
.onClick(() => {
console.info("index==>"+index)
scroll.scrollToIndex(0);
scroll.scrollTo({
xOffset: 0,
yOffset: 0,
animation: { duration: 500, curve: Curve.LinearOutSlowIn }
});
})
}
.tabBar(this.tabBuilder(index, tabName))
}
关键代码片段2： Stack({ alignContent: Alignment.Top }) { Scroll(this.scrollerForScroll) { Column() { Tabs() { this.listBuilder($r(‘app.string.goods’), $r(‘app.string.Promotional’), 0,new Scroller()) this.listBuilder($r(‘app.string.Itinerary’), $r(‘app.string.Travel’),1,new Scroller()) } .barWidth($r(‘app.float.bar_width’)) .onAnimationStart(( _index: number, targetIndex: number, _event: TabsAnimationEvent) => { this.currentIndex = targetIndex; }) } } .scrollBar(BarState.Off) .width(CommonConstants.FULL_WIDTH) .height(CommonConstants.FULL_HEIGHT) } .width(CommonConstants.FULL_WIDTH) .height(CommonConstants.STACK_HEIGHT)
更多关于HarmonyOS鸿蒙Next中切换TabContent List的scroller不跟随Tab切换的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，切换TabContent时，如果List的Scroller不跟随Tab切换，可能是由于Scroller的状态未正确更新或绑定。鸿蒙Next中，TabContent的切换通常通过TabList和TabContent组件实现。Scroller作为List的滚动控制器，需要与TabContent的切换事件同步。
在鸿蒙Next的ArkUI框架中，Scroller的状态可以通过@State或@Link装饰器进行管理。确保Scroller的状态与TabContent的切换事件绑定，可以通过onChange事件监听Tab的切换，并在切换时更新Scroller的状态。例如，使用TabContent的onChange事件来触发Scroller的重置或更新。
如果Scroller未跟随Tab切换，可以检查以下几点：
- 确保Scroller的状态与TabContent的切换事件正确绑定。
- 检查Scroller的初始化逻辑，确保在Tab切换时Scroller能够正确重置。
- 使用
TabContent的onChange事件来触发Scroller的更新。
通过这些步骤，可以确保Scroller在Tab切换时能够正确跟随。
