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

news2024/9/27 12:14:31

序言：

本文详细讲解了关于我们在页面上经常看到的轮播图在鸿蒙开发中如何用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的常见属性

属性方法

传值

作用

默认值

loop

boolean

是否开启循环

true

autoPlay

boolean

是否自动播放

false

interval

number

自动播放时间间隔（ms）

3000

vertical

boolean

纵向滑动轮播

false

...其他属性

见文档

2）需求

使用上述属性，将刚刚的轮播图调整为

①自动播放

②播放间隔：4s

③纵向滑动

      Swiper(){
        //1.轮播内容
        Text('1')
          .backgroundColor(Color.Orange)
        Text('2')
          .backgroundColor(Color.Blue)
        Text('3')
          .backgroundColor(Color.Gray)
      }
      //2.设置尺寸（内容会自动拉伸）
      //tips：给外层设置宽高，未来的子元素都会进行统一的拉伸
      .width('100%')
      .height(100)
      .loop(true) //是否开启循环
      .autoPlay(true)  //是否自动播放
      .interval(4000)  //自动播放时间间隔-4s
      .vertical(true)  //纵向轮播

改为了纵向滑动→通常会在手机宣传页出现

3.Swiper样式自定义

1）使用案例：

      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)
      //定制小圆点
      .indicator(
        Indicator.dot()  //小圆点
          .itemWidth(20)  //默认的宽
          .itemHeight(5)  //默认的高
          .color(Color.Gray)  //默认的颜色
          .selectedItemWidth(30)  //选中的宽
          .selectedItemHeight(5)  //选中的高
          .selectedColor(Color.White)  //选中的颜色
      )

tips：

aspectRatio(1)  //宽高比例为1
aspectRatio(2)  //宽高比例为2
//等比例缩放用于根据不同设备想要相同的视觉效果，保持图片的正常适配

二.样式&结构重用

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

1）原代码：

     Swiper(){
        //1.轮播内容
        Text('1')
          .backgroundColor(Color.Orange)
          .textAlign(TextAlign.Center)
          .fontColor(Color.White)
          .fontSize(30)
          .onClick(()=>{
            AlertDialog.show({
              message:'我是轮播图1号'
            })
          })
        Text('2')
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontColor(Color.White)
          .fontSize(30)
          .onClick(()=>{
            AlertDialog.show({
              message:'我是轮播图2号'
            })
          })
        Text('3')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontColor(Color.White)
          .fontSize(30)
          .onClick(()=>{
            AlertDialog.show({
              message:'我是轮播图3号'
            })
          })
      }
      //2.设置尺寸（内容会自动拉伸）
      //tips：给外层设置宽高，未来的子元素都会进行统一的拉伸
      .width('100%')
      .height(100)
      .loop(true)
      .autoPlay(true)
      .interval(4000)

2）组件重写的方法和图示

@Extend(Text)
function textExtend(color:ResourceColor,txt:string){
  .backgroundColor(color)
  .textAlign(TextAlign.Center)
  .fontColor(Color.White)
  .fontSize(30)
  .onClick(()=>{
    AlertDialog.show({
      message:txt
    })
  })
}

3）重写达成的效果：

①代码部分：

     Swiper(){
        //1.轮播内容
        Text('4')
          .textExtend(Color.Red,'我是轮播图4号')
        Text('5')
          .textExtend(Color.Yellow,'我是轮播图5号')
        Text('6')
          .textExtend(Color.Pink,'我是轮播图6号')


      }
      //2.设置尺寸（内容会自动拉伸）
      //tips：给外层设置宽高，未来的子元素都会进行统一的拉伸
      .width('100%')
      .height(100)
      .loop(true)
      .autoPlay(true)
      .interval(4000)

②图示：

显而易见于上面啰嗦的代码，通过封装大段相同的代码，我们的代码会变得更加简洁高效

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

1）原文件：

    Column(){
      Text(this.message)
        .margin(50)
        .width(100)
        .height(100)
        .backgroundColor(this.bgColor)
        .onClick(()=>{
          this.bgColor=String(Color.Orange)
        })


      Button('按钮')
        .margin(50)
        .width(100)
        .height(100)
        .backgroundColor(this.bgColor)
        .onClick(()=>{
          this.bgColor=String(Color.Orange)
        })


      Column(){}
      .margin(50)
      .width(100)
      .height(100)
      .backgroundColor(this.bgColor)
      .onClick(()=>{
        this.bgColor=String(Color.Orange)
      })
    }

2）组件重写的方法与图示

①带this的全局用不了，组件内定义就可以用

②例如onClick这种带逻辑的，也是看带不带this，带this的就放在组件内定义

③Styles不支持传参

④因为全局定义无法获取this，所以组件内定义要比全局更加常用

Column(){
  Text(this.message)
    .commonStyles()
    .setBg()
  
  Button('按钮')
    .commonStyles()
    .setBg()




  Column(){}
  .commonStyles()
  .setBg()


}

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

1）原代码：

    Row(){
      Column(){
        Image($r('app.media.ic_reuse_01'))
          .width('80%')
        Text('阿里拍卖')
      }
      .width('25%')
      .onClick(()=>{
        AlertDialog.show({
          message:'点击了 阿里拍卖'
        })
      })


      Column(){
        Image($r('app.media.ic_reuse_02'))
          .width('80%')
        Text('菜鸟')
      }
      .width('25%')
      .onClick(()=>{
        AlertDialog.show({
          message:'点击了 菜鸟'
        })
      })


      Column(){
        Image($r('app.media.ic_reuse_03'))
          .width('80%')
        Text('芭芭农场')
      }
      .width('25%')
      .onClick(()=>{
        AlertDialog.show({
          message:'点击了 芭芭农场'
        })
      })


      Column(){
        Image($r('app.media.ic_reuse_04'))
          .width('80%')
        Text('阿里药房')
      }
      .width('25%')
      .onClick(()=>{
        AlertDialog.show({
          message:'点击了 阿里药房'
        })
      })


    }

2）组件重写的方法与图示

//全局 Builder
@Builder
function navItem(icon:ResourceStr,txt:string){
  Column({space:10}) {
    Image(icon)
      .width('80%')
    Text(txt)
  }
    .width('25%')
    .onClick(()=>{
      AlertDialog.show({
        message:'点击了'+txt
      })
    })
}


@Entry
@Component


struct Index {
  @State message: string = 'Hello World';
  build() {
    Row(){
      Row(){
        navItem($r('app.media.ic_reuse_01'),'阿里拍卖')
        navItem($r('app.media.ic_reuse_02'),'菜鸟')
        navItem($r('app.media.ic_reuse_03'),'芭芭农场')
        navItem($r('app.media.ic_reuse_04'),'阿里药房')
      }
      }
    }
    
}

感谢阅读。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2169948.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

HarmonyOS鸿蒙开发实战（ Beta5.0）标题下拉缩放实践案例

HarmonyOS鸿蒙开发实战（ Beta5.0）标题下拉缩放实践案例

鸿蒙HarmonyOS NEXT开发实战往期文章必看（持续更新......） HarmonyOS NEXT应用开发性能实践总结 HarmonyOS NEXT应用开发案例实践总结合集 最新版！“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门…
阅读更多...
耦合微带线单元的网络参量和等效电路公式推导

耦合微带线单元的网络参量和等效电路公式推导

文档下载链接：耦合微带线单元的网络参量和等效电路资源-CSDN文库https://download.csdn.net/download/lu2289504634/89583027笔者水平有限，错误之处欢迎留言！ 一、耦合微带线奇偶模详细推导过程 二、2,4端口开路 三、2端口短路、3端口开路 四…
阅读更多...
护眼台灯哪个品牌更好？五款由专业眼科医生推荐的护眼台灯

护眼台灯哪个品牌更好？五款由专业眼科医生推荐的护眼台灯

台灯是每个家庭中不可或缺的照明设备，尤其是对于有学龄儿童的家庭来说，孩子们每天在家学习和做作业时，一款优秀的护眼台灯显得尤为重要。如果长期使用的台灯是不合格，不能给孩子提供一个好的光照环境，那么孩子们的视力…
阅读更多...
VUE.js笔记

VUE.js笔记

1.介绍vue Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。 Vue 应用程序的基本…
阅读更多...
镭射限高防外破预警装置-线路防外破可视化监控，安全尽在掌握中

镭射限高防外破预警装置-线路防外破可视化监控，安全尽在掌握中

镭射限高防外破预警装置-线路防外破可视化监控，安全尽在掌握中 在城市化浪潮的汹涌推进中，电力如同现代社会的生命之脉，其安全稳定运行直接关系到每一个人的生活质量和社会的整体发展。然而，随着建设的加速，电力设施通…
阅读更多...
宠物店揭秘！那种猫罐头好？4款营养满分主食罐头来袭

宠物店揭秘！那种猫罐头好？4款营养满分主食罐头来袭

五年来，我家宠物店始终秉持初心，为猫咪打造了一个美食乐园，从湿猫粮、干猫粮，到各式零食，应有尽有。最近，猫罐头这股热潮更是席卷而来，成为许多猫咪的新宠。然而，面对市场上各式各样…
阅读更多...
C语言课程设计题目四：实验设备管理系统设计

C语言课程设计题目四：实验设备管理系统设计

序号系统设计题目进度1职工信息管理系统设计已完成，在本专栏2图书信息管理系统设计已完成，在本专栏3图书管理系统设计已完成，在本专栏4实验设备管理系统设计已完成，在本专栏5西文下拉菜单的设计链接6学生信息管理系统设计链接7学生…
阅读更多...
Spring Boot入门全攻略：从环境搭建到项目运行，一步步带你走进高效Java开发的奇妙世界！

Spring Boot入门全攻略：从环境搭建到项目运行，一步步带你走进高效Java开发的奇妙世界！

Spring Boot 是一个简化 Spring 应用开发的框架，它提供了一种快速、广泛接受的平台，用于创建独立的、生产级的基于 Spring 的应用。以下是一个简单的 Spring Boot 入门教程。 1. 环境准备 Java：确保安装了 Java 8 或更高版本。Maven/Gradle&…
阅读更多...
【微信小程序】uniapp中HBuilder修改代码，微信开发者工具没有刷新

【微信小程序】uniapp中HBuilder修改代码，微信开发者工具没有刷新

方法一：设置-编辑器-按图设置，去掉【修改文件时自动保存】 方法二：开启热加载 方法三：直接HBuilder中用在运行
阅读更多...
c语言200例 64

c语言200例 64

大家好，欢迎来到无限大的频道。 今天带领大家来学习c语言。 题目要求： 设计一个进行候选人的选票程序。假设有三位候选人，在屏幕上输入要选择的候选人姓名， 有10次投票机会，最后输出每个人的得票结果。好的&#xff…
阅读更多...
在线聊天室项目（Vue3 + SpringBoot）

在线聊天室项目（Vue3 + SpringBoot）

目录 项目描述 技术栈选型 项目开发过程文档 项目页面效果 项目源码地址 项目描述 1. 网页在线聊天室，实现了群组系统和好友系统，因此项目可以在公共群组，私有群组和私人之间进行聊天。 2. 项目主要使用Websocket实时通信技术实现聊天&…
阅读更多...
Arch Linux 安装步骤

Arch Linux 安装步骤

仅做学习记录，有错漏之处欢迎批评指正！ 上一节：用U盘制作安装镜像 文章目录 二、安装系统2.1 使用U盘启动安装系统2.2 连接网络Wi-Fi方式（1）开启iwd内置的DHCP客户端（2）启动iwd并连接Wi-Fi 2.3 …
阅读更多...
C++冷门知识点1

C++冷门知识点1

1.特殊情况汇总： 负数，空指针，叶节点，INT_MAX和INT_MIN 2.双指针法(快慢指针，头尾指针)，三数指针法(链表逆序那块) 3.一定要注意极端情况 2.e后边可以跟负数，但是不能跟小数 3.string的push_bac…
阅读更多...
Navicat数据库管理工具实现Excel、CSV文件导入到MySQL数据库

Navicat数据库管理工具实现Excel、CSV文件导入到MySQL数据库

1.所需要的工具和环境 navicat等第三方数据库管理工具云服务器中安装了 1Panel面板搭建的mysql数据库 2.基于 1Panel启动mysql容器 2.1 环境要求 安装前请确保您的系统符合安装条件： 操作系统：支持主流 Linux 发行版本（基于 Debian / Re…
阅读更多...
【Wireshark笔记】通过Wireshark检测和分析TCP重传

【Wireshark笔记】通过Wireshark检测和分析TCP重传

通过Wireshark检测和分析TCP重传 在网络通信中，TCP重传（TCP Retransmission）是一种非常重要的现象，特别是在分析网络性能和故障排查时。重传数据包会影响网络性能，导致延迟增加，甚至引发网络拥塞等问题。为…
阅读更多...
Java刷题：最小k个数

Java刷题：最小k个数

目录 题目描述： 思路： 具体实现 整体建立一个大小为N的小根堆 通过大根堆实现 完整代码 力扣链接：面试题 17.14. 最小K个数 - 力扣（LeetCode） 题目描述： 设计一个算法，找出数组中最小的…
阅读更多...
【Java 问题】基础——异常

【Java 问题】基础——异常

接上文 异常 39.Java 中异常层级结构?40.异常的处理机制？41.三道经典异常处理代码题 39.Java 中异常层级结构? Java的异常是分为多层的。 Throwable 是 Java 语言中所有错误或异常的基类。 Throwable 又分为 Error 和 Exception ，其中Error是系统内部…
阅读更多...
从‘盲管’到‘智网’，漫途精准构建排水管网监测方案

从‘盲管’到‘智网’，漫途精准构建排水管网监测方案

在城市错综复杂的基础设施网络中，排水管网作为城市的“血脉”，其高效、稳定运行直接关系到城市生活的安宁与财产的安全。面对日益频繁的雨季挑战与气候变化的不确定性，传统“盲管”管理模式已难以满足现代城市治理的需求。 漫途排水管网监测…
阅读更多...
本地Docker部署高颜值跨平台照片管理软件lmmich并远程上传图片

本地Docker部署高颜值跨平台照片管理软件lmmich并远程上传图片

文章目录 前言1.关于Immich2.安装Docker3.本地部署Immich4.Immich体验5.安装cpolar内网穿透6.创建远程链接公网地址7.使用固定公网地址远程访问 前言 本篇文章介绍如何在本地搭建lmmich图片管理软件，并结合cpolar内网穿透实现公网远程访问到局域网内的lmmich&#…
阅读更多...
Python新手学习过程记录之基础环境：环境变量、版本区分、虚拟环境

Python新手学习过程记录之基础环境：环境变量、版本区分、虚拟环境

https://img-blog.csdnimg.cn/img_convert/0604267530a515112e51dfc80d0b0ee7.png 刚开始接触Python并学习一门开发语言,可能就会遇到一些棘手的问题,比如电脑上不知不觉已经安装了多个python版本,python3.8/3.10/3.11,甚至一些软件中也集成有python解释器；那么我编…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023