HarmonyOS 鸿蒙Next中Swiper组件的基本使用

HarmonyOS 鸿蒙Next中Swiper组件的基本使用

@Entry
@Component
struct Page01_Swiper {
  // Swiper 基本使用
  build() {
    Column() {
      Text('Swiper基本使用')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Text('0')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)
        Text('1')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)
          .fontColor(Color.White)
          .fontSize(30)
        Text('2')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(30)
      }
      .width('100%')
      .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中Swiper组件的基本使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS（鸿蒙Next）中，Swiper组件用于实现轮播图效果，常用于展示图片或内容片段。

Swiper组件的基本使用包括以下几个步骤：

  1. 引入Swiper组件：在页面中引入Swiper组件，通常通过<swiper>标签进行声明。

  2. 设置Swiper属性：Swiper组件支持多种属性来配置其行为，如：

    • index：设置初始显示的索引。
    • autoplay：设置是否自动播放。
    • interval：设置自动播放的时间间隔。
    • indicator：设置是否显示指示器。

  3. 添加SwiperItem：在Swiper组件内部，使用<swiper-item>标签添加每个轮播项，每个<swiper-item>代表一个轮播内容。

  4. 样式设置：可以通过CSS样式对Swiper组件进行自定义，如设置宽度、高度、背景色等。

示例代码：

<swiper autoplay="true" interval="3000" indicator="true">
    <swiper-item>
        <image src="image1.jpg" style="width: 100%; height: 200px;"></image>
    </swiper-item>
    <swiper-item>
        <image src="image2.jpg" style="width: 100%; height: 200px;"></image>
    </swiper-item>
    <swiper-item>
        <image src="image3.jpg" style="width: 100%; height: 200px;"></image>
    </swiper-item>
</swiper>

以上代码实现了一个自动播放、带有指示器的Swiper轮播图，展示了三张图片，每张图片的显示时间为3秒。Swiper组件的使用较为简单，通过配置不同的属性和样式，可以满足多种轮播需求。

更多关于HarmonyOS 鸿蒙Next中Swiper组件的基本使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS的鸿蒙Next中，Swiper组件用于实现轮播图效果。基本使用步骤如下：

  1. 导入组件：在页面顶部导入Swiper组件。
import { Swiper, SwiperItem } from '@ohos/swiper';
  1. 定义Swiper：在页面布局中使用<Swiper>标签定义轮播容器，内部使用<SwiperItem>标签定义每个轮播项。
<Swiper>
  <SwiperItem><Text>第一页</Text></SwiperItem>
  <SwiperItem><Text>第二页</Text></SwiperItem>
  <SwiperItem><Text>第三页</Text></SwiperItem>
</Swiper>
  1. 配置属性：可通过autoplay、interval等属性控制自动播放和切换间隔。
<Swiper autoplay="true" interval="3000">
  <SwiperItem><Text>第一页</Text></SwiperItem>
  <SwiperItem><Text>第二页</Text></SwiperItem>
  <SwiperItem><Text>第三页</Text></SwiperItem>
</Swiper>
回到顶部