HarmonyOS鸿蒙Next应用开发练习-Swiper效果展示

HarmonyOS鸿蒙Next应用开发练习-Swiper效果展示 滑动容器，提供切换子组件显示的能力。下面通过案例演示效果。

显示效果：

点击“跳转最后一页”

点击“展示下一页”

点击“展示上一页”

Html文件中的代码

<swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false">
<text class="text">第一页</text>
<text class="text">第二页</text>
<text class="text">第三页</text>
</swiper> <input class="button" type="button" value="跳转最后一页" onclick="swipeTo"> <input class="button" type="button" value="展示下一页" onclick="showNext"> <input class="button" type="button" value="展示上一页" onclick="showPrevious">

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/swiper


更多关于HarmonyOS鸿蒙Next应用开发练习-Swiper效果展示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next应用开发中，Swiper组件用于实现轮播图效果，支持水平和垂直方向的滑动。开发者可以通过Swiper组件结合SwiperController来实现自定义的轮播效果。以下是一个简单的示例代码，展示如何使用Swiper组件：

import { Swiper, SwiperController } from '@ohos/swiper';

@Entry
@Component
struct SwiperExample {
  private controller: SwiperController = new SwiperController();

  build() {
    Column() {
      Swiper(this.controller) {
        Text('Page 1').fontSize(30).textAlign(TextAlign.Center)
        Text('Page 2').fontSize(30).textAlign(TextAlign.Center)
        Text('Page 3').fontSize(30).textAlign(TextAlign.Center)
      }
      .indicator(true) // 显示指示器
      .loop(true) // 开启循环播放
      .duration(1000) // 设置切换动画时长
      .onChange((index: number) => {
        console.info(`Current page index: ${index}`);
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在这个示例中，Swiper组件包含了三个Text组件作为轮播项。indicator(true)用于显示页面指示器，loop(true)开启循环播放，duration(1000)设置切换动画时长为1000毫秒。onChange事件监听器用于在页面切换时输出当前页面的索引。

开发者可以根据需求进一步自定义Swiper组件，例如设置自动播放、调整轮播方向等。

更多关于HarmonyOS鸿蒙Next应用开发练习-Swiper效果展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Swiper组件用于实现轮播图效果，常用于图片或内容的滑动展示。开发步骤如下：

  1. 引入Swiper组件：在XML布局文件中使用<Swiper>标签定义Swiper容器。

  2. 添加子元素：在<Swiper>内使用<SwiperItem>定义每个轮播项，可放置图片、文本或其他组件。

  3. 设置属性：通过autoplay、interval等属性控制自动播放和切换间隔。

  4. 样式调整：使用indicator属性自定义指示器样式，提升用户体验。

  5. 事件处理：通过onSwiperChange监听滑动事件，实现自定义逻辑。

通过以上步骤，可快速实现Swiper效果，适用于产品展示、广告轮播等场景。

回到顶部