HarmonyOS鸿蒙Next中Swpier与Tabs联动报错

HarmonyOS鸿蒙Next中Swpier与Tabs联动报错 按照官网文档示例，Swpier与Tabs联动，为啥会报错Error message:is not callable，指向 swiperController这个控制器报错 官方文档连接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-looping#swiper与tabs联动

5 回复

这边使用IDE的版本6.0.0.868，api20的项目运行在api20版本的模拟器上运行这段代码并不会报错。

麻烦提供下当前使用的版本信息（如：开发工具、手机系统版本信息）；

如果代码有自己的改动，还需要提供下可复现的demo；

更多关于HarmonyOS鸿蒙Next中Swpier与Tabs联动报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


真机系统是否是API 18及以上？目前Tab与Swiper的联动中，onSelect函数仅API18+支持

cke_928.png

hello小伙伴你好，排查了一下是 onSelected 方法 导致错误，改成onChange依然可以实现但是效果于onSelected貌似有点差距，建议将手机和编辑器都要升级到api18才可以使用这个方法 望采纳！

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): number {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct TabsSwiperExample {
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State currentIndex: number = 0;
  private list: number[] = [];
  private tabsController: TabsController = new TabsController();
  private swiperController: SwiperController = new SwiperController();
  private swiperData: MyDataSource = new MyDataSource([]);

  aboutToAppear(): void {
    for (let i = 0; i <= 9; i++) {
      this.list.push(i);
    }
    this.swiperData = new MyDataSource(this.list);
  }

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('20%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) {
        ForEach(this.list, (index: number) =>{
          TabContent().tabBar(this.tabBuilder(index, '页签 ' + this.list[index]))
        })
      }
      .onTabBarClick((index: number) => {
        this.currentIndex = index;
        this.swiperController.changeIndex(index, true);
      })
      .barMode(BarMode.Scrollable)
      .backgroundColor('#F1F3F5')
      .height(56)
      .width('100%')

      Swiper(this.swiperController) {
        LazyForEach(this.swiperData, (item: string) => {
          Text(item.toString())
            .width('100%')
            .height('40%')
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .loop(false)
      .onChange((index: number) => {
        this.currentIndex = index;
        this.tabsController.changeIndex(index);
      })
    }
  }
}

在HarmonyOS Next中，Swiper与Tabs联动报错通常涉及组件间数据绑定或状态同步问题。检查Swiper的index属性与Tabs的change事件是否匹配，确保两者绑定的状态变量类型一致且更新同步。若使用@State修饰变量，需确认其变更能触发界面刷新。常见错误包括数据类型不匹配、事件回调未正确设置或组件版本不兼容。

在HarmonyOS Next中，Swiper与Tabs联动时出现“is not callable”错误通常是由于SwiperController的初始化或调用方式不正确导致的。请检查以下几点：

  1. 控制器初始化：确保SwiperController已正确初始化，例如：

    private swiperController: SwiperController = new SwiperController();

    如果未初始化或初始化方式错误，调用时会报错。

  2. 方法调用：确认调用的方法是否存在。例如，swipeTo方法用于切换页面：

    this.swiperController.swipeTo(index);

    如果方法名拼写错误或调用未定义的方法，会触发此错误。

  3. 代码示例参考：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct SwiperTabsExample {
  private swiperController: SwiperController = new SwiperController();
  @State currentIndex: number = 0;

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start }) {
        // Tabs内容
      }
      .onChange((index: number) => {
        this.swiperController.swipeTo(index); // 确保这里的方法正确
      })

      Swiper(this.swiperController) {
        // Swiper内容
      }
      .onChange((index: number) => {
        this.currentIndex = index;
      })
    }
  }
}

    检查onChange事件中的方法调用是否与控制器实例匹配。

  4. 版本兼容性：确认HarmonyOS Next的SDK版本与文档示例一致，避免API变更导致的问题。

如果问题仍存在，建议检查控制器的定义和调用链路，确保没有重复声明或作用域冲突。

回到顶部