HarmonyOS 鸿蒙Next 自定义TabLayout代码示例,通过 Scroll 锚点 Tab 布局,滚动条会自动滚动使选中的标签居中显示。
HarmonyOS 鸿蒙Next 自定义TabLayout代码示例,通过 Scroll 锚点 Tab 布局,滚动条会自动滚动使选中的标签居中显示。
class MyTabItem { label: string = “”; positionX: number = -1; // 当前位置 width: number = -1; // 当前宽度
constructor(label: string) { this.label = label; } }
@Component struct MyTabLayout { onSelected?: (selectedIndex: number) => void; scroller: Scroller = new Scroller(); @Prop tabItems: MyTabItem[]; @State @Watch(‘selectIndexChanged’) selectedIndex: number = 0; @State tabBarWidth: number = 0; // Tab 栏宽度
selectIndexChanged() { if (this.onSelected) { this.onSelected(this.selectedIndex); } }
build() { Column() { Scroll(this.scroller) { Row() { ForEach(this.tabItems, (item: MyTabItem, index: number) => { Row() { Image($r(‘app.media.app_icon’)).width(‘44lpx’).height(‘44lpx’); Text(item.label) .margin({ left: ‘16lpx’ }) .fontColor(index === this.selectedIndex ? “#FF1919” : “#2E2E2E”) .fontSize(‘30lpx’); }.padding({ right: ‘16lpx’ }) .onAreaChange((previousArea: Area, currentArea: Area) => { if (item.positionX === -1) { item.positionX = currentArea.position.x as number; } if (item.width === -1) { item.width = currentArea.width as number; } }) .onClick(() => { this.selectedIndex = index;
<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.scroller.scrollTo({ xOffset: (item.positionX - <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tabBarWidth / <span class="hljs-number"><span class="hljs-number">2</span></span> + item.width / <span class="hljs-number"><span class="hljs-number">2</span></span>), yOffset: <span class="hljs-number"><span class="hljs-number">0</span></span>, animation: <span class="hljs-literal"><span class="hljs-literal">true</span></span> }); }); }); }.height(<span class="hljs-string"><span class="hljs-string">'95lpx'</span></span>); } .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .borderWidth({ bottom: <span class="hljs-number"><span class="hljs-number">1</span></span> }) .borderColor(<span class="hljs-string"><span class="hljs-string">"#e3e3e3"</span></span>) .align(Alignment.Start) .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>) .onAreaChange((previousArea: Area, currentArea: Area) => { <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tabBarWidth = currentArea.width as number; }); }
} }
@Entry @Component struct Page11 { scroller: Scroller = new Scroller(); @State tabItems: MyTabItem[] = []; @State selectedIndex: number = 0
getRandomInt(min: number, max: number): number { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }
aboutToAppear(): void { for (let i = 0; i < 20; i++) { this.tabItems.push(new MyTabItem(
项目:${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.getRandomInt(<span class="hljs-number"><span class="hljs-number">1</span></span>, <span class="hljs-number"><span class="hljs-number">10000</span></span>)}
)); } }
build() { Column() { MyTabLayout({ tabItems: this.tabItems, onSelected: (selectedIndex: number) => { console.info(
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>当前选择的位置: ${selectedIndex}
); this.selectedIndex = selectedIndex } }); Stack() { Text(当前选择的位置:${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectedIndex}
) }.width(‘100%’) .layoutWeight(1) .backgroundColor(Color.Orange) } .height(‘100%’) .width(‘100%’); } }
关于HarmonyOS 鸿蒙Next 自定义TabLayout代码示例,通过 Scroll 锚点 Tab 布局,滚动条会自动滚动使选中的标签居中显示。的问题,您也可以访问:https://www.itying.com/category-93-b0.html 联系官网客服。
更多关于HarmonyOS 鸿蒙Next 自定义TabLayout代码示例,通过 Scroll 锚点 Tab 布局,滚动条会自动滚动使选中的标签居中显示。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
大佬,有办法实现tabs栏的滑动,每次都是翻页的形式滑动吗?
更多关于HarmonyOS 鸿蒙Next 自定义TabLayout代码示例,通过 Scroll 锚点 Tab 布局,滚动条会自动滚动使选中的标签居中显示。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
希望HarmonyOS能继续优化系统稳定性,减少崩溃和重启的情况。
tabs的内容可以用Swiper,原理是监听Swiper的滑到的下标去更新tabs的下标。