通过 Tabs 组件的 animationDuration 属性可设置页面过渡动画时长。

declare class TabsAttribute extends CommonMethod<TabsAttribute> {    /**     * 页面过渡动画时长     */    animationDuration(value: number): TabsAttribute;}

所谓的页面过渡时长，其实就是 TabContent 滑动动画时长。

不设置时，点击切换页签无动画，滑动切换有动画；

设置时，点击切换和滑动切换都有动画。

下面，我们来写一个示例看看。

首先，使用 Tabs 组件作为 build 函数的根组件。

@Entry@Componentstruct Index {  build() {    Tabs() {          }  }}

然后，填充内容。

@Entry@Componentstruct Index {  build() {    Tabs() {      TabContent() {        Text("关注")      }.tabBar("关注")      TabContent() {        Text("推荐")      }.tabBar("推荐")      TabContent() {        Text("热榜")      }.tabBar("热榜")    }  }}

最后，设置页面过渡动画时长为 200 毫秒。

@Entry@Componentstruct Index {  build() {    Tabs() {      TabContent() {        Text("关注")      }.tabBar("关注")      TabContent() {        Text("推荐")      }.tabBar("推荐")      TabContent() {        Text("热榜")      }.tabBar("热榜")    }    // 是否可通过滑动页面进行页面切换    .animationDuration(200)  }}

运行结果：

从运行结果来看，页面过渡很快。

接下来，我们将页面过渡动画时长由 200 毫秒改为 2000 毫秒。

@Entry@Componentstruct Index {  build() {    Tabs() {      TabContent() {        Text("关注")      }.tabBar("关注")      TabContent() {        Text("推荐")      }.tabBar("推荐")      TabContent() {        Text("热榜")      }.tabBar("热榜")    }    // 是否可通过滑动页面进行页面切换    .animationDuration(2000)  }}

运行结果：

从运行结果来看，页面过渡很慢很慢。

建议：

如无必要，页面过渡动画时长采用默认值 300 毫秒即可。