【07】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Swiper轮播组件与样式&结构重用

序言：

本文详细讲解了关于我们在页面上经常看到的轮播图在鸿蒙开发中如何用Swiper实现，介绍了Swiper的基本用法与属性，及如何面对大段的重复代码进行封装和重用（@Extend、@Styles、@Builder），使代码更加简洁易读。

笔者也是跟着B站黑马的课程一步步学习，学习的过程中添加部分自己的想法整理为笔记分享出来，如有代码错误或笔误，欢迎指正。

B站黑马的课程链接：鸿蒙课程介绍_哔哩哔哩_bilibili

往期笔记：

【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础

【02】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-界面进阶与布局排布（附QQ登陆、得物、京东登陆综合案例+代码）

【03】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-更多布局（弹性/层叠）方式与界面开发综合（附飞狗卡片+B站卡片案例+实战开发支付宝界面+代码）

【04】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs进阶运算符+状态管理（附综合案例美团购物车）

【05】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-条件渲染+if/switch判断与for/while循环（附计数器、京东加购案例）
【06】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-综合案例·生肖抽奖卡具体实现（类似支付宝集五福）

目录

一.Swiper轮播组件

1.Swiper的基本用法

2.Swiper的常见属性

3.Swiper样式自定义

二.样式&结构重用

1.@Extend：扩展组件（样式、事件）

2.@Style：抽取通用属性、事件

3.@Builder：自定义构建函数（结构、样式、事件）

一.Swiper轮播组件

简介：

Swiper是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。（图片、文字...）

1.Swiper的基本用法

1）语法结构：

    Swiper(){
      //1.轮播内容
    }
    //2.设置尺寸（内容会自动拉伸）
    .width('100%')
    .height(100)

2）使用案例：

  build() {
    Column(){
      //Swiper 轮播组件的基本使用


      Swiper(){
        //1.轮播内容
        Text('1')
          .backgroundColor(Color.Orange)
        Text('2')
          .backgroundColor(Color.Blue)
        Text('3')
          .backgroundColor(Color.Gray)
      }
      //2.设置尺寸（内容会自动拉伸）
      //tips：给外层设置宽高，未来的子元素都会进行统一的拉伸
      .width('100%')
      .height(100)


      Swiper(){
        //1.轮播内容
        Image($r('app.media.ic_swiper_xmyp01'))
        Image($r('app.media.ic_swiper_xmyp02'))
        Image($r('app.media.ic_swiper_xmyp03'))
        Image($r('app.media.ic_swiper_xmyp04'))
      }
      //2.设置尺寸（内容会自动拉伸）
      //tips：给外层设置宽高，未来的子元素都会进行统一的拉伸
      .width('100%')
      .height(100)
    }
  }

2.Swiper的常见属性

1）Swiper的常见属性