HarmonyOS鸿蒙Next中Tabs空间是否支持滑动切换指示器？
HarmonyOS鸿蒙Next中Tabs空间是否支持滑动切换指示器？ 关于Tabs组件的问题：
-
切换场景时，是否支持指示器滑动滚动？
-
请问，是否支持在满屏的情况下，tabbar居左展示？
有人了解吗？
3 回复
如果指示器是指tab导航栏
如果居左展示是指导航栏在左边
具体代码如下：
import { router } from '@kit.ArkUI';
@Component
struct TabsExample1 {
private controller: TabsController = new TabsController();
build() {
Flex({ alignItems: ItemAlign.Center }) {
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
Image($r('app.media.ic_home_focus'))
.height('22vp')
.width('22vp')
Text('首页')
.fontSize($r('app.float.micro_font_size'))
.fontColor($r('app.color.sixty_alpha_black'))
.margin({ top: $r('app.float.vp_four') })
}
.height('100%')
.width('74vp')
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
Image($r('app.media.ic_cart_normal'))
.height('22vp')
.width('22vp')
Text($r('app.string.cart'))
.fontSize($r('app.float.micro_font_size'))
.fontColor($r('app.color.sixty_alpha_black'))
.margin({ top: $r('app.float.vp_four') })
}
.onClick(()=>{
router.pushUrl({
url:'pages/test/tabsshow/TabsExample2'
})
})
.height('100%')
.width('74vp')
}
.height('100%')
.margin({ right: $r('app.float.vp_eight') })
}
.height($r('app.float.vp_fifty_six'))
.width('100%')
.padding({ right: $r('app.float.vp_sixteen') })
.backgroundColor($r('app.color.page_background'))
}
}import { router } from '@kit.ArkUI';
@Component
struct TabsExample1 {
private controller: TabsController = new TabsController();
build() {
Flex({ alignItems: ItemAlign.Center }) {
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
Image($r('app.media.ic_home_normal'))
.height('22vp')
.width('22vp')
Text('首页')
.fontSize($r('app.float.micro_font_size'))
.fontColor($r('app.color.sixty_alpha_black'))
.margin({ top: $r('app.float.vp_four') })
}
.onClick(()=>{
router.pushUrl({
url:'pages/test/tabsshow/TabsExample1'
})
})
.height('100%')
.width('74vp')
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
Image($r('app.media.ic_cart_focus'))
.height('22vp')
.width('22vp')
Text($r('app.string.cart'))
.fontSize($r('app.float.micro_font_size'))
.fontColor($r('app.color.sixty_alpha_black'))
.margin({ top: $r('app.float.vp_four') })
}
.height('100%')
.width('74vp')
}
.height('100%')
.margin({ right: $r('app.float.vp_eight') })
}
.height($r('app.float.vp_fifty_six'))
.width('100%')
.padding({ right: $r('app.float.vp_sixteen') })
.backgroundColor($r('app.color.page_background'))
}
}更多关于HarmonyOS鸿蒙Next中Tabs空间是否支持滑动切换指示器？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，Tabs组件支持滑动切换指示器。开发者可以通过设置TabContent的scrollable属性为true来实现滑动切换功能。当用户滑动屏幕时，指示器会跟随滑动动作进行切换，提供流畅的用户体验。此外，Tabs组件还支持自定义指示器的样式和位置，开发者可以根据需求进行调整。
