HarmonyOS鸿蒙Next中AlphabetIndexer能不能自定义样式，或者有无tab和list的组合用法
HarmonyOS鸿蒙Next中AlphabetIndexer能不能自定义样式，或者有无tab和list的组合用法 我想实现如下图的内容，目前的写法是左边tab,右边list,左边点击或滚动都会使右边跳到对应的位置，右侧也是同理，但是现在有个小问题，就是list这边会有时候跳转不到对应的位置
更多关于HarmonyOS鸿蒙Next中AlphabetIndexer能不能自定义样式，或者有无tab和list的组合用法的实战教程也可以访问 https://www.itying.com/category-93-b0.html
您好，可以采用如下解决方案：
List({ scroller: this.listScroller, initialIndex: this.selectedIndex }) {
ForEach(this.list, (item: string, index: number) => {
ListItem() {
Column() {
Text(item).fontColor(Color.Red);
}
.height(index === (this.list.length - 1) ? “100%” : “20%”)
.onClick(() => {
this.selectedIndex = index
})
}.width(“100%”);
}, (item: string) => item);
}
.onScrollIndex((firstIndex: number) => {
this.selectedIndex = firstIndex;
// 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
});
更多关于HarmonyOS鸿蒙Next中AlphabetIndexer能不能自定义样式，或者有无tab和list的组合用法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
感谢提问：
您说tab那边点到最后几个一直有问题，我们验证时把右边的数据构造成listgroup，左边选中后右边对应的数据是个list，效果会明显一点。您看是否是想要的效果。
@Entry @ComponentV2 export struct HomeView { private controller: TabsController = new TabsController(); @Local dividerColor: string = “red”; @Local currentIndex: number = 0; @Local nullFlag: boolean = false; @Local list: string[] = [“手办”, “漫画”, “周边”, “手办”, “漫画”, “周边”, “手办”, “漫画”, “周边”, “手办”, “漫画”, “周边”, “手办”, “漫画”, “周边”]; @Local selectedIndex: number = 0; private listScroller: Scroller = new Scroller();
aboutToAppear() {
}
@Builder tabBuilder(name: string, index: number) { Column() { Text(name) .fontColor(this.selectedIndex === index ? Color.Pink : “#000000”) .fontSize(16) .fontWeight(500) .lineHeight(14) .padding({ left: 10 }) .textAlign(TextAlign.End) .border({ width: { left: 5 }, color: { left: “#e3bbbb” }, }); }.width(“100%”).height(“100%”).justifyContent(FlexAlign.Center); }
build() { Row() { Tabs({ controller: this.controller, }) { ForEach(this.list, (item: string, index: number) => { TabContent() { }.tabBar(this.tabBuilder(item, index)).height(100 / index + “%”);
}, (item: string) => item);
}
.vertical(true)
.scrollable(true)
.barWidth(70)
.onChange((index: number) => {
this.currentIndex = index;
this.selectedIndex = index;
this.listScroller.scrollToIndex(index)
})
.onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
if (index === targetIndex) {
return;
}
// selectedIndex控制自定义TabBar内Image和Text颜色切换
this.selectedIndex = targetIndex;
})
.height("100%")
.width("30%")
.margin({ bottom: "12vp" });
List({ scroller: this.listScroller, initialIndex: this.selectedIndex }) {
ForEach(this.list, (item: string, index: number) => {
ListItem() {
Column() {
Text(item).fontColor(Color.Red);
}.height("20%")
.onClick(() => {
this.selectedIndex = index
})
}.width("100%");
}, (item: string) => item);
}.onScrollIndex((firstIndex: number) => {
this.selectedIndex = firstIndex;
// 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
});
};
} }
这是我的代码，主要还是tab那边点到最后几个一直有问题
