#鸿蒙通关秘籍#如何实现Tabs组件的页面滑动切换功能？

设置scrollable为true，使页面可以通过滑动改变。如下代码所示：

@Entry
@Component
struct TabsScrollableExample {
  @State currentIndex = 0;
  
  build() {
    Tabs({ index: this.currentIndex, scrollable: true }) {
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87');
      }.tabBar('Page 1')

      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF');
      }.tabBar('Page 2')
      
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#FFBF00');
      }.tabBar('Page 3')
    }
    .onChange((index) => {
      this.currentIndex = index;
    });
  }
}