【鸿蒙 HarmonyOS】Swiper组件

一、背景

项目中通常会遇到图片轮播,内容轮播的场景;如:在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。

二、源码地址

✍Gitee开源项目地址👉:https://gitee.com/cheinlu/harmony-os-next-swiper

文档地址👉:文档中心

三、实现效果

  

四、代码示例

@Entry
@Component
struct Index {//轮播图数据源@State swiperList: ResourceStr[] = [$r("app.media.swiper_one"), $r("app.media.swiper_two"), $r("app.media.swiper_three"), $r("app.media.swiper_four"),$r("app.media.swiper_five")]@State selectedIndex: number = 0 //默认选中索引为0build() {Stack({ alignContent: Alignment.Bottom }) {Swiper() {ForEach(this.swiperList, (item: ResourceStr, index: number) => {Image(item).width('100%').height('100%')})}.onChange((index: number) => {this.selectedIndex = index}).autoPlay(true).indicator(false).itemSpace(0).width('100%').height('100%')//此处为自定义角标if (this.swiperList.length > 1) {List({ space: 5 }) {ForEach(this.swiperList, (item: ResourceStr, index: number) => {ListItem() {Image(this.selectedIndex === index ? $r("app.media.carousel_blue") : $r("app.media.carousel_gary")).width(20).aspectRatio(1)}})}.listDirection(Axis.Horizontal).align(Alignment.Center).enableScrollInteraction(false).hitTestBehavior(HitTestMode.Transparent).constraintSize({ maxWidth: '90%' }).height(20).margin({ left: 20, bottom: 20, right: 20 })}}}
}

4.1、属性说明

autoPlay:子组件是否自动播放。默认值:false

indicator:是否启用导航点指示器。默认值:true

itemSpace:设置子组件与子组件之间间隙。默认值:0。说明:不支持设置百分比。

4.2、自定义角标

官方文档默认角标效果:

通过如下代码更改角标样式,更换成菱形图片选中与未选中替换样式

🚀🚀🚀  踩坑不易,还希望各位大佬支持一下

📃 我的土拨鼠开源项目:

✍Gitee开源项目地址👉:https://gitee.com/cheinlu/groundhog-charging-system

✍GitHub开源项目地址👉:https://github.com/cheinlu/groundhog-charging-system

📃 我的鸿蒙NEXT轮播图开源组件:https://gitee.com/cheinlu/harmony-os-next-swiper

最后:👏👏😊😊😊👍👍  

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx与Gateway

Nginx与Gateway Nginx 基本介绍 Nginx 是一款轻量级的高性能 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。它由俄罗斯的 Igor Sysoev 所开发,最初供俄罗斯大型的门户网站及搜索引擎 Rambler 使用。 Nginx 的特点在于其占用…

多种异构数据的分析设计方案2:使用策略模式+函数式接口+MAP

多种异构数据的分析设计方案2:聊聊策略模式函数式接口MAP 定义 策略模式(Strategy Pattern): 定义并封装一系列算法类,并且这些类可以相互替换,可以在运行时根据需要选择不同的算法,而不需要修改客户端流程代码。 策略模式让算法…

质量小议39 -- 要多少饺子皮

试验、总结、调整; 基准、标量化、定制化。 包饺子,1斤肉,要多少饺子皮。 每次要包饺子总是要问这样的问题:皮少了馅没得处理,皮多了没地方放。 有没有一个好办法? 1. 影响饼子皮数量的原因有…

机房运维管理中的告警管理:构建高效IT故障管理体系

随着信息技术的迅猛发展,机房作为IT系统的核心,其运维管理的重要性日益凸显。其中,告警管理作为机房运维的关键环节,为用户提供了统一的全流程故障管理体系,确保网络故障的快速准确发现与处理。本文将深入探讨机房运维…

gma 2.0.10 (2024.06.16) | GmaGIS V0.0.0a4 更新日志

安装 gma 2.0.10 pip install gma2.0.10网盘下载: 链接:https://pan.baidu.com/s/1P0nmZUPMJaPEmYgixoL2QQ?pwd1pc8 提取码:1pc8 注意:此版本没有Linux版! 编译gma的Linux虚拟机没有时间修复,本期Linux版…

Dubbo入门与实践

Apache Dubbo是一款高性能的Java RPC框架,它提供了高效的服务发现和负载均衡机制。Dubbo适用于构建大规模的分布式系统,尤其是微服务架构。以下是Dubbo的入门指南和实践示例,帮助你开始使用Dubbo。 1. 环境准备 首先,确保你已经…

CAP和Base

CAP定理和BASE理论是分布式系统领域中两个重要的概念,它们分别描述了分布式系统设计中的一些基本限制和原则。 CAP定理 CAP定理,又称布鲁尔定理(Brewer’s theorem),由计算机科学家埃里克布鲁尔(Eric Bre…

oracle job

1. 定义 Job是一个可以被调度以在特定时间或按一定频率自动执行的数据库对象。Job通常用于执行预定的后台任务,如数据清理、统计信息更新、备份操作、数据导入导出、报告生成等。这些任务可以是任何可以在数据库环境中执行的操作,最常见的形式是调用存储…

AtCoder Beginner Contest 358 A~E(F,G更新中...)

A.Welcome to AtCoder Land 题意 给出两个字符串 S , T S, T S,T&#xff0c;请你判断是否满足&#xff1a; 字符串 S S S为AtCoder 字符串 T T T为Land 分析 输入后判断即可 代码 #include<bits/stdc.h> using namespace std; void solve() {string s, t;cin &g…

学习记录:VS2019+OpenCV3.4.1实现SURF库函数的调用

最近在学习opencv的使用&#xff0c;在参照书籍《OpenCV3编程入门》实现SURF时遇到不少问题&#xff0c;下面做归纳总结。 错误 LNK2019 无法解析的外部符号 “public: static struct cv::Ptr __cdecl cv::xfeatures2d::SURF::create(double,int,int,bool,bool)” (?createSUR…

51单片机实验05 -点阵

目录 一&#xff0c;熟悉矩阵led小灯 1&#xff0c;点亮矩阵的一只led 2&#xff0c;点亮矩阵的一排led 3&#xff0c;点亮矩阵的全部led static 关键字 unsigned 关键字 4&#xff0c;点阵的静态显示 2&#xff09;心形矩阵显示代码 3&#xff09;效果 二&#xff0c;课…

模仿qsort实现一个通用的冒泡排序

目录 前言 模仿 排序整型数组 排序结构体数组 排序字符数组 前言 qsort在前面我们讲到底层逻辑是快速排序的方式&#xff0c;是不是可以发现有了qsort来进行排序的话&#xff0c;就更加的方便快捷&#xff0c;我们在使用的时候 一方面&#xff0c;代码量会大大的减少 另一…

bat处理批量文件重命名

遇到需要批量重命名文件的情况&#xff0c;许多博主文章有方法介绍&#xff0c;但可行的不多。&#xff08;主要是推荐专用工具&#xff0c;但这些工具还都是要收费的。&#xff09;下面把我的办法分享下。 总体概括是使用bat文件处理。 1、生成Excle文件 2、全选要重命名的所…

北京多商入驻app开发项目的主要优势及功能

多商入驻app开发项目的定义 随着电子支付技术的不断成熟&#xff0c;全国各地的消费者通过网络在线上购物的频率越来越高&#xff0c;为此&#xff0c;多商入驻app开发项目应用而生。各商家也纷纷开始申请入驻商城平台&#xff0c;开设自己的店铺。 图片来源&#xff1a;unspl…

Ubuntu20.04环境下Baxter机器人开发环境搭建

Ubuntu20.04环境下Baxter机器人开发环境搭建 ubuntu20.04安装 略 安装ROS 略 Baxter机器人依赖安装 主目录创建工作空间&#xff0c;按以下步骤执行 mkdir -p ~/baxter_ws/src source /opt/ros/noetic/setup.bash cd ~/baxter_ws catkin_make catkin_make install s…

oracle的json_arrayagg的用法和例子

JSON_ARRAYAGG 是 Oracle 数据库中用于将多行数据聚合为一个 JSON 数组的函数。这个函数对于将查询结果转换为 JSON 格式特别有用&#xff0c;尤其是在 RESTful API 或需要 JSON 输出的应用中。 语法 sql JSON_ARRAYAGG ( [ DISTINCT | UNIQUE ] expr [ ON NULL { NULL | AB…

【CT】LeetCode手撕—121. 买卖股票的最佳时机

目录 题目1- 思路2- 实现⭐121. 买卖股票的最佳时机——题解思路 2- ACM实现 题目 原题连接&#xff1a;121. 买卖股票的最佳时机 1- 思路 模式识别 模式1&#xff1a;只能某一天买入 ——> 买卖一次 ——> dp 一次的最大利润 动规五部曲 1.定义dp数组&#xff0c;确…

数据结构之线性表(2)

顺序表中的动态存储 上文我们了解到了顺序表中的静态顺序表的相关操作&#xff0c;今天我们来学习动态顺序表的知识。 为什么会存在动态顺序表呢&#xff1f;&#xff1f; 原因&#xff1a;静态顺序表给定的数据容量固定&#xff0c;多了浪费&#xff0c;少了不够用。 首先我…

python,自定义token生成

1、使用的包PyJWT来实现token生成 安装&#xff1a;pip install PyJWT2.8.0 2、使用例子&#xff1a; import jwt import time pip install pyJWT2.8.0 SECRET_KEY %^ES*E&Ryurehuie9*7^%$#$EDFGHUYTRE#$%^&%$##$RTYGHIK DEFAULT_EXP 7 * 24 * 60def create_token(…

蓝桥杯十五届国赛模拟题1答案

1、bug缺陷报告 功能名称缺陷描述操作步骤预期结果实际结果缺陷级别销售订单列表