HarmonyOS鸿蒙Next中tabs切换

HarmonyOS鸿蒙Next中tabs切换 tabs 切换到边界时如何禁止继续滑动，现在到 tabs 的 index === 0 时，依然可以滑动边界，出现页面背景。如何禁止

4 回复

添加PanGesture手势来实现 常规手势绑定方法

@Entry
@Component
struct TabContentPage {
  @State message: string = 'Hello World';
  @Provide('count') count: number = 0;
  build() {
    Row() {
      Column() {
        Tabs({
          index:0,
        }){
          TabContent(){
            TestConsumeAndProvideA()
          }.tabBar(new SubTabBarStyle('1')).backgroundColor(Color.Blue).gesture(PanGesture(new PanGestureOptions({direction: PanDirection.Right})))
          TabContent(){
            TestConsumeAndProvideA()
          }.tabBar(new SubTabBarStyle('2')).backgroundColor(Color.Red)
          TabContent(){
            TestConsumeAndProvideA()
          }.tabBar(new SubTabBarStyle('3')).backgroundColor(Color.Green).gesture(PanGesture(new PanGestureOptions({direction: PanDirection.Left})))
        }
        .vertical(false)
        .scrollable(true)
        .animationDuration(0)
        .barMode(BarMode.Scrollable)
        .barHeight(56)
        .width('100%')
        .height('100%')
        .onChange((index:number)=>{
          promptAction.showToast({message:`当前的页面索引是${index}`})
          if (index===1) {
            this.count = this.count+1
          }
        })
        .barMode(BarMode.Scrollable)
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct TestConsumeAndProvideA {
  build() {
    Text("测试")
  }
}

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


给Tab设置无回弹属性.edgeEffect(EdgeEffect.None)

在HarmonyOS（鸿蒙Next）中，Tabs组件用于实现标签页的切换功能。开发者可以使用Tabs和TabContent组件来创建多个标签页，并通过滑动或点击标签来切换内容。

Tabs组件的主要属性包括：

  • barPosition：设置标签栏的位置，如顶部或底部。
  • index：设置当前选中的标签页索引。
  • controller：用于控制标签页的切换。

TabContent组件用于定义每个标签页的内容，每个TabContent对应一个标签页。

示例代码：

@Entry
@Component
struct TabsExample {
  private controller: TabsController = new TabsController()

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Text('Tab 1 Content').fontSize(20)
        }.tabBar('Tab 1')

        TabContent() {
          Text('Tab 2 Content').fontSize(20)
        }.tabBar('Tab 2')

        TabContent() {
          Text('Tab 3 Content').fontSize(20)
        }.tabBar('Tab 3')
      }
      .onChange((index: number) => {
        console.log('Tab index changed: ' + index)
      })
    }
    .width('100%')
    .height('100%')
  }
}

在上述代码中，Tabs组件包含三个TabContent，每个TabContent对应一个标签页。barPosition属性设置为BarPosition.Start，表示标签栏位于顶部。controller用于控制标签页的切换，onChange事件监听标签页的切换。

在HarmonyOS鸿蒙Next中，实现Tabs切换可以通过Tabs和TabContent组件来完成。首先，使用Tabs组件创建标签页容器，然后在其中嵌套多个TabContent组件，每个TabContent代表一个标签页的内容。通过Tabs的index属性可以控制当前显示的标签页，onChange事件可以监听标签页的切换。示例代码如下：

@Entry
@Component
struct TabsExample {
  @State currentIndex: number = 0

  build() {
    Tabs({ index: this.currentIndex, onChange: (index) => { this.currentIndex = index } }) {
      TabContent() {
        Text('Tab 1 Content')
      }
      TabContent() {
        Text('Tab 2 Content')
      }
    }
  }
}

通过这种方式，用户可以轻松实现Tabs切换功能。

回到顶部