鸿蒙开发5.0【基于Swiper的页面布局】

场景一:Swiper页面支持自定义动画

方案:

  1. 给Swiper组件设置.nextMargin(50).prevMargin(50)属性。

  2. 给Swiper组件添加onChange事件,设置当前this.currentIndex=index,当currentIndex为首页或者尾页时,设置上一张以及下一张图片的缩放值。

    核心代码:

    
    .onChange((index) => {console.info('changeIndex' + index)this.currentIndex = index// 设置当前index缩放值为最大值this.scaleArray[this.currentIndex] = MAX_SCALE;if (this.currentIndex == 0) {// 当前index=0时,设置上一张图片的缩放值this.scaleArray[this.scaleArray.length - 1] = MIN_SCALE} else// 当前index不为0时,设置上一张图片的缩放值{this.scaleArray[this.currentIndex -1] = MIN_SCALE}if (this.currentIndex == this.scaleArray.length - 1) {// 当index为最后一张图片时,设置下一张图片的缩放值this.scaleArray[0] = MIN_SCALE} else// 当index不为最后一张时,设置上一张图片的缩放值{this.scaleArray[this.currentIndex + 1] = MIN_SCALE}})
    
  3. 设置Swiper组件的.displayMode(SwiperDisplayMode.STRETCH)使其Swiper滑动一页的宽度为Swiper组件自身的宽度,如果displayMode属性为SwiperDisplayMode.AUTO_LINEAR时,customContentTransition接口不生效。

  4. 给Swiper添加customContentTransition(transition: SwiperContentAnimatedTransition)事件,设置页面移除视窗时超时1000ms下渲染树,然后对视窗内所有页面逐帧回调transition。想要实现显示在视窗内正中间的Index为正常状态,两边的index图片为缩小状态。通过事件回调的proxy获取下面数据,通过滑动的距离来计算滑动过程中图片的缩放值。

    
    .customContentTransition({// 页面移除视窗时超时1000ms下渲染树timeout: 1000,// 对视窗内所有页面逐帧回调transition,在回调中修改opacity、scale、translate、zIndex等属性值,实现自定义动画transition: (proxy: SwiperContentTransitionProxy) => {if (this.startSwiperOffset == 0) {this.startSwiperOffset = proxy.position * proxy.mainAxisLength;console.info('startSwiperOffset:' + this.startSwiperOffset)}console.info('proxy-selectedIndex:' + proxy.selectedIndex + '--index:' + proxy.index +'--position:' + proxy.position + '--mainAxisLength:' + proxy.mainAxisLength)let offset: number = proxy.position * proxy.mainAxisLength // 移动距离let currentScale: number = this.scaleArray[proxy.index] //当前index缩放值let nextIndex = (proxy.index == this.scaleArray.length - 2 ? 0 : proxy.index + 1) //计算下一个indexlet preIndex = (proxy.index == 0 ? this.scaleArray.length - 2 : proxy.index - 1) //计算上一个indexlet nextScale: number = this.scaleArray[nextIndex] //下一个index缩放值let preScale: number = this.scaleArray[preIndex] //上一个index缩放值// 通过滑动的距离来计算滑动过程中图片的缩放值let distance = Math.abs(offset)currentScale = MAX_SCALE - Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE) //当前缩放值if (this.startSwiperOffset > offset) {nextScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE)preScale = MIN_SCALE} else {preScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE)nextScale = MIN_SCALE}this.scaleArray[this.currentIndex] = currentScale //当前index缩放值this.scaleArray[nextIndex] = nextScale //下一个index缩放值this.scaleArray[preIndex] = preScale //上一个index缩放值}})
    

场景二:Swiper指示器距离底部位置

方案:

此方案只适用于指示点距离底部的位置

将Swiper分成两个部分上部分为Swiper内容区,下部分为一块空白区域, 空白区域专门放置指示器点。可以通过indicator 属性去设置指示器点的部分样式。


@Entry@Componentstruct SwiperPageTwo {@State message: string = 'Hello World';private bannerInfo: number[] = [1, 2, 3, 4]dataList:Color[] = [Color.Gray, Color.Yellow, Color.Blue,Color.Pink,Color.Orange]build() {if (this.bannerInfo && this.bannerInfo.length > 0) {Swiper() {ForEach(this.bannerInfo, (item: number, index: number) => {Column() {// 第一部分 Swiper内容区域Column().width("100%").height(200).borderRadius("8vp").backgroundColor(this.dataList[index])// 第二部分 指示点区域Column() {}.width('100%').height(35)}})}.cachedCount(2).autoPlay(true).interval(3000).vertical(false).loop(true).margin({ left: "16vp", right: "16vp" }).indicator(new DotIndicator().bottom(5).itemWidth("8vp").itemHeight("8vp").selectedItemWidth("10vp").selectedItemHeight("10vp").color(Color.Green).selectedColor(Color.Orange))}}}

场景三:Swiper自定义指示器

目前Swiper自带的指示器位置限定比较固定,不能完全靠底部、左边或者右边以及不能调整指示器中间间距,因此可以考虑自定义指示器,将指示器位置定位到我们所需的地方。

方案:

给Swiper自带指示器设置.indicator(false),然后在Swiper组件下面写一个自定义的指示器。


// 自定义指示器,可以通过定位Row() {ForEach(this.data, (item: string, index: number) => {Column().width(this.currentIndex === index ? 10 : 5).height(5)// 设置指示点中间间距.margin(5).borderRadius(5).backgroundColor(Color.Green).backgroundColor(this.currentIndex === index ? Color.Red : Color.Gray)}, (item: string) => item)}//设置指示点距离Swiper上下的距离.margin({ top: 5 })// 设置指示点在Swiper的左边或者右边或者其他地方// .position({x:0,y:300})

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解;想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到!
下面是鸿蒙的完整学习路线,展示如下:
1

除此之外,根据这个学习鸿蒙全栈学习路线,也附带一整套完整的学习【文档+视频】,内容包含如下

内容包含了:(ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战)等技术知识点。帮助大家在学习鸿蒙路上快速成长!

鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

2

为了避免大家在学习过程中产生更多的时间成本,对比我把以上内容全部放在了↓↓↓想要的可以自拿喔!谢谢大家观看!
3

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

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

相关文章

生产环境中变态开启devtools(强制)

写到最前面 首先,你已经下载了google的插件【vue devtools】,不知道怎么下载,留言博主 如果你想看的项目中的vuetools插件打开是这样的 Vue.js is detected on this page. Devtools inspection is not available because it’s in product…

Unet改进14:添加SEAttention||减少冗余计算和同时存储访问

本文内容:在不同位置添加SEAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 卷积算子是卷积神经网络(cnn)的核心组成部分,它使网络能够通过融合每层局部接受域内的空间和通道信息来构建信息特征。之前的广泛研究已经调查了这种关系的…

大模型之二十九-语音识别Whisper推理加速

在上一篇博客《大模型之二十八-语音识别Whisper进阶》中我们留了一个尾巴,就是在流式场景以及如何提升推理速度。 流式场景 流式场景分两种,一种是伪流式一种是真流式,伪流式就是bilibili或者YouTub,终端用户在观看视频的时候&a…

人工智能再次进化 善用AI提升营运效率

人工智能无疑为我们的生活带来不少便利,也为商界和社会发展作出了重大贡献。事实上,它的起源最早可以追溯到70年前,只可惜过往的 AI 技术尚未如现时般成熟,可以做到的事也远比现在少;直至近期的 AI 技术取得了重大突破…

人工智能领域正经历模型规模变革,小型语言模型(SLM)崛起,挑战“规模至上”观念。

在人工智能领域,一场关于模型规模的深刻变革正在悄然发生。长久以来,科技巨头们热衷于庞大语言模型(LLM)的开发竞赛,但如今,小型语言模型(SLM)正以其独特的优势逐步崭露头角&#xf…

【qt】qss使用

1.按钮设置颜色 ui->pushButton->setStyleSheet("QPushButton { color : red;}");也可以通过rgb来设置 ff表示红色拉满,gb为0当然是红色 这只是针对pushbutton对象的控件设置的,如果我想设置所有的按钮空间都是一个颜色 这是通过设置界…

dubbo:dubbo服务负载均衡、集群容错、服务降级、服务直连配置详解(五)

文章目录 0. 引言1. dubbo负载均衡1.1 负载均衡算法1.2. dubbo负载均衡使用1.3 自定义负载均衡策略 2. dubbo服务容错2.1 8种服务容错策略2.2 自定义容错策略 3. dubbo服务降级(mock)4. dubbo服务直连5. 总结 0. 引言 之前我们讲解了dubbo的基本使用&am…

使用 AI进行绘画初体验

大家好啊,我是董董灿。 AI 绘画的效果是真的不错,最近在查找AI相关技术文章时,总是会时不时的发现一些好玩的 AI 应用,而且大多数都是免费的。 今天就给大家介绍如何使用 MidJourney 来完成 AI 绘画的网站。 MidJourney 本身是…

6种有效的时间序列数据特征工程技术(使用Python)

在商业分析中,"时间"是一个核心概念。我们基于时间组件来分析销售数据、收入、利润、增长,甚至进行预测。然而,对于初学者来说,这可能是一个复杂的主题。在处理时间敏感的数据集时,需要考虑时间序列数据的多…

Unet改进12:添加PCONV||减少冗余计算和同时存储访问

本文内容:添加PCONV 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 为了设计快速的神经网络,许多工作都集中在减少浮点运算(FLOPs)的数量上。然而,我们观察到FLOPs的这种减少并不一定会导致类似程度的延迟减少。这主要源于低效率的每秒浮点操作数(FLOP…

STM32——GPS模块(GY-NEO-6M)

1连接 1-1 使用 USB-TTL 工具,安装好驱动,可以在”设备管理器看到对应COM”按照如下链接测试模块: USB-TTL GPS 模块 3.3V--------------------------------->VCC GND------------------------------>GND RXD--------------------…

Linux安装Hadoop(单机版)详细教程

目录 一、JDK安装 1、下载JDK安装包 2、解压下载的JDK安装包 3、移动并重命名JDK包 4、配置Java环境变量 5、验证安装是否成功 二、Hadoop安装 1、下载Hadoop安装包 2、解压Hadoop安装包 3、配置Hadoop环境变量 4、修改配置文件 5、验证Hadoop是否安装成功 三&…

使用3D数字人做视频

用3D数字人做视频 漂亮精致 3D数字人定制4 动作流畅、音乐上的表现 thatgirl 支持私人定制模型 你愿意捐献所有的财产吗 想搭建这样的数字人的请和我们联系 使用3D数字人做视频https://www.jinshuangshi.com/forum.php?modviewthread&tid248 (出处: 金双石科技)

力扣经典题目之->二叉树的前序遍历(中序后序同理)

一:题目 解释: 1: 题目的要求就是我们return 一个数组,该数组里面的元素及其顺序就是 前序遍历二叉树 的元素及其顺序 比如:示例1的树,前序遍历的顺序应该是1 2 3,那么return 的数组里面的元素…

智慧高校迎新服务平台的设计与实现---附源码92489

摘要 随着高校规模的不断扩大和新生人数的增加,传统的手工登记和管理方式已经无法满足高效、准确的需求。为了提升高校新生报到迎新工作的效率和质量,本研究设计开发了一套基于SSM框架的智慧高校迎新服务平台的设计与实现。系统通过信息技术的应用&#…

12-使用gateway作为微服务网关

本文介绍spring gateway的使用,包括配置文件的使用和调试跟踪,让大家了解spring gateway的基本用法。如果不了解什么是微服务网关,就先查查资料,网关相对来说是比较重要的微服务组件。 0、环境 springboot 2.4.2springcloud gat…

Minkowski分形电路生成工具[程序附后]

此工具用于生成Minkowski分形电路,应用领域可参考分形电路的纪录片或CNKI论文。运行环境在Altium Designer中,可用于Altium Designer全系列的版本中。 程序界面如下图所示,可以支持外框和迭代次数的更改。 程序下载链接: Minkows…

图片拼图怎么做?4个方法打造具有高级感的拼图作品

被阿勒泰的日落治愈了,旅行中的每一刻都值得珍藏。 这次的阿勒泰之行,我不仅带回了一堆美好的回忆,还有手机里满满的精彩瞬间。从壮丽的山川到静谧的湖泊,从晨曦初现到夜幕降临,每一帧都是大自然的馈赠。但是&#xf…

三天速成数学建模国赛国奖全攻略

这里写目录标题 国赛考点🗒️🗒️01 国赛是如何评奖的?02 国赛历年题型和模型算法1)国赛赛题特点2)历年国赛赛题类型 建模手三天快速提升计划✨✨01 第一天:模型分类及国赛常见模型的用法了解1)…

图形化编程/Scratch/编程猫角色素材免费分享1-10期合集

今天给大家带来一些业余整理的scratch等图形化编程软件可以使用的角色素材图片分享,都是PNG格式的透明图片,scratch软件可直接上传角色使用(也支持编程猫等软件,因为素材是PNG格式,所有支持png格式的软件都可以使用&am…