鸿蒙进阶篇-Swiper组件的使用

“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。”

各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,

鸿蒙进阶篇-Swiper组件的使用
————————————————

1.使用场景

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力，比如年轻人常用的哔哩哔哩首页：

2.基本用法

首先来看看如何设置轮播内容，以及设置尺寸

1. 轮播内容：内容作为Swiper的子组件即可
2. 尺寸：1）设置 Swiper 的尺寸：内容会拉伸为和 Swiper 一致（优先级高）2）设置内容尺寸：会将Swiper撑开

@Entry
@Component
struct Index {
  // Swiper 基本使用
  build() {
    Column() {
      Text('Swiper基本使用')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Text('0')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('1')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('2')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
    }
    .width('100%')
    .height('100%')
  }
}

3.常用属性

设置了内容以及尺寸之后已经可以实现基础的轮播效果啦，接下来看看一些常见属性：

利用上面几个属性，只要加上B站的图片，就大致上能实现B站首页的轮播图效果了，B站就是无限循环播放的，当然，还有一些细节需要进一步调整实现，比如导航点：

4.设置导航点

Swiper提供了默认的导航点样式和导航点箭头样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicator属性自定义导航点的位置和样式，导航点箭头默认不显示。

通过indicator属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

日常开发中 较为常见的是圆点指示器，咱们重点掌握如何调整他即可：

4.1位置属性：

4.2样式属性：

最后就是根据这些属性，咱们来实现华为商城首页的效果：

代码如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Swiper案例-华为商城')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Image('https://res.vmallres.com/uomcdn/CN/cms/202410/00cf6b02aacd4397968749ff39ae61db.jpg')
        Image('https://res.vmallres.com/uomcdn/CN/cms/202410/e9dc382b676348c593093e1f75053d45.jpg')
        Image('https://res.vmallres.com/uomcdn/CN/cms/202410/ff6a269fadff421da538ee5ee65c45ac.jpg')
        Image('https://res.vmallres.com/uomcdn/CN/cms/202410/3aba7d4d6ce14d45828e6a2dea221573.jpg')
      }
      .width('100%')
      .height(160)
      .indicator(
        Indicator.dot()// 圆形导航点
          .selectedColor(Color.Black)// 选中颜色
          .selectedItemWidth(10)// 选中宽度
          .selectedItemHeight(5)// 选中高度
          .itemWidth(5)// 默认宽度
          .itemHeight(5) // 默认高度
      )
    }
    .width('100%')
    .height('100%')
  }
}

以上是关于鸿蒙进阶篇-Swiper组件的使用的一些内容,方便大家学习,至此，关于鸿蒙进阶篇-Swiper组件的使用的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！

以上内容仅供学习交流，如有违法或者侵权可以联系删除。