HarmonyOS 鸿蒙Next tab 切换和内容区域联动实现

Stack() {
List({ scroller: this.classifyScroller, initialIndex: 0 }) {
// 性能知识点：此处为横向列表，列表项确定且数量较少，使用了ForEach，在列表项多的情况下，推荐使用LazyForeEach
ForEach(this.tagLists, (item: string, index: number) => {
this.tagListItemBuilder(item, index);
})
}
.onScrollIndex((start: number, end: number) => {
this.tagIndexPosition = { start, end };
})
.listDirection(Axis.Horizontal)
.scrollBar(BarState.Off)
.height(48)
.width(‘100%’)
}
.margin({top:0})

.onScrollIndex((start: number) => {
// TODO:知识点: 4.滑动二级列表触发组件滚动事件后，返回列表可视区域的第一个item对应的索引值，当前通过二级列表索引获取一级列表索引，操作一级列表Scroller对象使列表滚动到指定位置
console.log(“onScrollIndex”+start);
const currentClassIndex = start;
if (currentClassIndex !== this.currentTagIndex && this.isClickTagList !== true) {
this.currentTagIndex = currentClassIndex;
this.classifyScroller.scrollToIndex(currentClassIndex, true);
}
}).layoutWeight(1)

/**


监听一级列表获焦索引变化
/
onIndexChange() {
const start = this.tagIndexPosition.start;
const end = this.tagIndexPosition.end;
if ((this.currentTagIndex === end || this.currentTagIndex === end - 1)) {
let leftScrollCount: number = this.currentTagIndex + 1;
leftScrollCount = leftScrollCount >= this.tagLists.length - 1 ? this.tagLists.length - 1 : leftScrollCount;
/*

scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign)
性能知识点：开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题。
*/
this.classifyScroller.scrollToIndex(leftScrollCount, true); // 使获焦item向左滚动
}
if (this.currentTagIndex === start || this.currentTagIndex === start + 1) {
let rightScrollCount: number = this.currentTagIndex - 1;
rightScrollCount = rightScrollCount <= 0 ? 0 : rightScrollCount;
this.classifyScroller.scrollToIndex(rightScrollCount, true); // 使获焦item向右滚动
}
}



/**

根据一级列表索引值获取二级列表索引值

@param {number} index - 一级列表索引值
@returns {number} 二级列表索引值
*/
findItemIndex(index: number): number {
return this.records[index];
}

/**

根据二级列表索引值获取对应一级列表索引

@param {number} index - 二级列表索引值
@returns {number} 一级列表索引值
*/
findClassIndex(index: number): number {
let ans = 0;
for (let i = 0; i < this.records.length; i++) {
if (index >= this.records[i] && index < this.records[i + 1]) {
ans = i;
return ans;
}
}
return ans;
}