各位小伙伴们我们又见面了,我是鸿蒙开天组,从今天开始，我们的课程进入一个新的阶段，基础已经学习了一部分，接下来的难度会稍微有所提升,也就是说在学的各位，要开始进阶，向更有难度的知识内容挑战了。可以向大家预告，进阶篇学完，积累得差不多，就要开始实战，尝试从小项目逐步过度到做大项目了，加油吧！

鸿蒙进阶篇-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.常用属性

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

autoPlay	boolean	子组件是否自动播放。 默认值：false 说明： loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。
interval	number	使用自动播放时播放的时间间隔，单位为毫秒。 默认值：3000
vertical	boolean	是否为纵向滑动。 默认值：false
loop	boolean	是否开启无限循环播放。 设置为true时表示无限循环播放，设置为false时表示只播放一次。 默认值：true

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

4.设置导航点

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

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

indicator

DotIndicator | DigitIndicator | boolean

设置可选导航点指示器样式。 - DotIndicator：圆点指示器样式。 - DigitIndicator：数字指示器样式。 - boolean：是否启用导航点指示器。 默认值：true 默认类型：DotIndicator

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

4.1位置属性：

参数名	参数类型	必填项	参数描述
left	Length	否	设置导航点距离Swiper组件左边的距离。 默认值：0 单位：vp
top	Length	否	设置导航点距离Swiper组件顶部的距离。 默认值：0 单位：vp
right	Length	否	设置导航点距离Swiper组件右边的距离。 默认值：0 单位：vp
bottom	Length	否	设置导航点距离Swiper组件底部的距离。 默认值：0 单位：vp

4.2样式属性：

参数名	参数类型	必填项	参数描述
itemWidth	Length	否	设置Swiper组件圆点导航指示器的宽，不支持设置百分比。 默认值：6 单位：vp
itemHeight	Length	否	设置Swiper组件圆点导航指示器的高，不支持设置百分比。 默认值：6 单位：vp
selectedItemWidth	Length	否	设置选中Swiper组件圆点导航指示器的宽，不支持设置百分比。 默认值：12 单位：vp
selectedItemHeight	Length	否	设置选中Swiper组件圆点导航指示器的高，不支持设置百分比。 默认值：6 单位：vp
color	ResourceColor	否	设置Swiper组件圆点导航指示器的颜色。 默认值：'#182431'（10%透明度）
selectedColor	ResourceColor	否	设置选中Swiper组件圆点导航指示器的颜色。 默认值：'#007DFF'

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

代码如下：

@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组件的使用的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！

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