HarmonyOS鸿蒙Next中使用tablist切换页面的方法

HarmonyOS鸿蒙Next中使用tablist切换页面的方法 选择tablist中的tab切换页面有哪些方法，目前想到的方案有两种：

1，为每个tab页单独新建xml，然后实例化改xml再addcompent到父容器里刷新。

2，为每个tab页新建abilityslise，然后present()拉起该页。

第1种方法会把每个tab页的业务逻辑写在一个slise中,感觉很臃肿，不够清晰。

第2种方法可以为每个tab页写个slise实现各自的业务。但是拉起各slise后，会失去上层slise,相当于覆盖了tablist菜单。

请问有没有综合的方法，既不覆盖当前slise的tablist,每个页面又能像拉起slise一样刷新页面。


更多关于HarmonyOS鸿蒙Next中使用tablist切换页面的方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-tabs-0000001478181433-V3

更多关于HarmonyOS鸿蒙Next中使用tablist切换页面的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我用的Java，不是arkts

首先，在你的项目中创建一个新的页面，例如tablist_page.hml。在这个页面中，添加一个<tab-list>组件，并为其设置一些基本属性，如width和height。

<div class="container">
    <tab-list id="tabList" width="100%" height="100" placement="top">
        <tab-item label="Page 1" />
        <tab-item label="Page 2" />
        <tab-item label="Page 3" />
    </tab-list>
</div>

在tablist_page.css文件中，为<tab-list>组件设置样式。

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

tab-list {
    width: 100%;
    height: 100;
}

在tablist_page.js文件中，为<tab-list>组件添加事件监听器，以便在用户切换页面时执行相应的操作。

import router from '@system.router';

export default {
    onTabChanged(e) {
        const tabIndex = e.index;
        // 根据用户选择的页面索引，导航到相应的页面
        switch (tabIndex) {
            case 0:
                router.push({ uri: '/pages/page1/page1' });
                break;
            case 1:
                router.push({ uri: '/pages/page2/page2' });
                break;
            case 2:
                router.push({ uri: '/pages/page3/page3' });
                break;
            default:
                break;
        }
    },
};

最后，确保你的项目中包含了这些页面。在app.js文件中，添加以下代码以注册这些页面：

import router from '@system.router';

export default {
    onInit() {
        router.push({ uri: '/pages/tablist_page/tablist_page' });
    },
};

现在，当你运行你的鸿蒙OS应用时，你应该能看到一个包含三个选项卡的页面。用户可以通过点击这些选项卡来切换页面。

在HarmonyOS鸿蒙Next中，使用TabList切换页面的方法如下：

  1. 布局文件：在xml布局文件中定义TabList和PageSlider组件。TabList用于显示标签，PageSlider用于管理页面切换。

    <DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">

    <TabList
        ohos:id="$+id:tab_list"
        ohos:width="match_parent"
        ohos:height="50vp"
        ohos:tab_margin="10vp"
        ohos:tab_length="100vp"
        ohos:selected_tab_color="#007BFF"
        ohos:normal_tab_color="#000000"/>

    <PageSlider
        ohos:id="$+id:page_slider"
        ohos:width="match_parent"
        ohos:height="match_parent"/>
</DirectionalLayout>

  2. 代码逻辑：在Java或JS代码中，初始化TabList和PageSlider，并设置它们的关联。

    TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);

// 添加标签
tabList.addTab(new TabList.Tab(new Text(context).setText("Tab 1")));
tabList.addTab(new TabList.Tab(new Text(context).setText("Tab 2")));
tabList.addTab(new TabList.Tab(new Text(context).setText("Tab 3")));

// 添加页面
pageSlider.addPage(new Text(context).setText("Page 1"));
pageSlider.addPage(new Text(context).setText("Page 2"));
pageSlider.addPage(new Text(context).setText("Page 3"));

// 设置标签切换监听
tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
    @Override
    public void onSelected(TabList.Tab tab) {
        pageSlider.setCurrentPage(tab.getPosition());
    }

    @Override
    public void onUnselected(TabList.Tab tab) {
        // 未选中时的处理
    }

    @Override
    public void onReselected(TabList.Tab tab) {
        // 重新选中时的处理
    }
});

// 设置页面切换监听
pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
    @Override
    public void onPageSliding(int position, float offset, int offsetPixels) {
        // 页面滑动时的处理
    }

    @Override
    public void onPageSlideStateChanged(int state) {
        // 页面滑动状态改变时的处理
    }

    @Override
    public void onPageChosen(int position) {
        tabList.selectTabAt(position);
    }
});

  3. 运行效果：当用户点击TabList中的标签时，PageSlider会切换到对应的页面；当用户滑动PageSlider时，TabList中的标签也会同步切换。

通过以上步骤，你可以在HarmonyOS鸿蒙Next中实现TabList与PageSlider的联动，完成页面切换功能。

在HarmonyOS鸿蒙Next中，使用TabList切换页面的步骤如下：

  1. 布局文件：在XML中定义TabList和PageSlider组件，TabList用于显示标签，PageSlider用于展示页面内容。
  2. 绑定事件：在Java或JS代码中，通过setOnTabSelectedListener方法为TabList设置选中监听器。
  3. 切换页面：在监听器中，根据选中的Tab索引，调用PageSlider的setCurrentPage方法切换到对应的页面。
  4. 更新UI：确保TabList和PageSlider的索引同步，以保持UI一致性。

此方法简洁高效，适用于多页面切换场景。

回到顶部