swiper的触发方法

### Vue 3 中 Swiper 的触发方法与 API 使用指南 在 Vue 3 组合式 API 下，`Swiper` 是一种常见的轮播组件，用于展示多个页面或卡片。其核心功能可以通过 `onChange` 方法监听索引变化，并通过设置参数控制行为。 #### Swiper 基本结构 以下是基于 HarmonyOS 和 Vue 3 的 Swiper 结构示例： ```typescript struct SwiperIndex { @State index: number = 0; build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { TopBar({ index: $index }) Swiper() .index(this.index) // 设置初始索引 .indicator(false) // 是否显示指示器 .loop(false) // 是否循环播放 .onChange((newIndex: number) => { // 监听索引变化 this.index = newIndex; }) { PageAll() PageMovie() PageTV() PageEntertainment() PageLive() PageGame() } }.backgroundColor($r('app.color.start_window_background')) } } ``` 此代码片段展示了如何配置 Swiper 并处理索引变更事件[^3]。 --- #### 主要 API 及触发方法说明 1. **`.index(value)`** - 功能：设置当前活动页的索引值。 - 参数：接收一个数值类型的变量作为输入。 - 示例： ```typescript .index(this.index) ``` 2. **`.onChange(callback)`** - 功能：当用户切换到新的页面时触发回调函数。 - 参数：接受一个 `(index: number) => void` 类型的回调函数。 - 示例： ```typescript .onChange((newIndex: number) => { console.log(`Current page is ${newIndex}`); this.index = newIndex; }) ``` 3. **`.indicator(visible)`** - 功能：决定是否显示底部的小圆点指示器。 - 参数：布尔值，默认为 `true` 表示显示。 - 示例： ```typescript .indicator(false) ``` 4. **`.loop(enable)`** - 功能：启用或禁用无限滚动模式。 - 参数：布尔值，默认为 `false` 表示不开启循环。 - 示例： ```typescript .loop(true) ``` 5. **动态控制器** 如果需要更复杂的交互操作（如手动跳转），可以引入 `SwiperController` 对象[^2]： ```typescript let controller: SwiperController = new SwiperController(); Button("Next").onClick(() => { controller.next(); // 切换到下一页 }); ``` --- #### 联动效果实现 为了使顶部导航栏 (`TopBar`) 与 `Swiper` 同步更新，通常采用双向绑定的方式。具体做法如下： - 定义状态变量 `@State index` 来存储当前选中的索引。 - 将该变量传递给 `TopBar`，并确保两者共享同一数据源。 - 当 `Swiper` 发生切换时，利用 `.onChange()` 更新 `this.index`，从而驱动视图重新渲染[^3]。 --- #### 注意事项 - 若未正确初始化 `Swiper` 或者忘记绑定索引，则可能无法正常工作。 - 在开发过程中建议调试日志辅助排查问题，例如打印每次切换后的索引值。 - 需要注意性能优化，尤其是包含大量子项的情况下，应避免不必要的重绘。 ---