轮播(Swiper)

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。

针对复杂页面场景,可以使用Swiper组件的预加载机制,利用主线程的空闲时间来提前构建和布局绘制组件,优化滑动体验。

布局与约束

Swiper作为一个容器组件,如果设置了自身尺寸属性,则在轮播显示过程中均以该尺寸生效。如果自身尺寸属性未被设置,则分两种情况:

  • 设置了prevMargin或者nextMargin属性,则Swiper自身尺寸会跟随其父组件;
  • 未设置prevMargin或者nextMargin属性,则会自动根据子组件的大小设置自身的尺寸。

常用属性

属性值属性描述默认值
loop循环播放true
autoPlay自动轮播false
interval播放间隔3000,单位毫秒
indicator导航点样式-
displayArrow控制导航点箭头的大小、位置、颜色,底板的大小及颜色,以及鼠标悬停时是否显示箭头-
vertical轮播方向false
displayCount在一个页面内同时显示多个子组件-

选项卡(Tabs)

当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的信息量。

基本布局

Tabs组件的页面组成包含两个部分,分别是TabContentTabBarTabContent是内容页,TabBar是导航页签栏,页面结构如下图所示,根据不同的导航类型,布局会有区别,可以分为底部导航、顶部导航、侧边导航,其导航栏分别位于底部、顶部和侧边。
Tabs组件布局示意图

TabContent

每一个TabContent对应的内容需要有一个页签,可以通过TabContenttabBar属性进行配置。在如下TabContent组件上设置tabBar属性,可以设置其对应页签中的内容,tabBar作为内容的页签。

 TabContent() {Text('首页的内容').fontSize(30)}
.tabBar('首页')

barPosition

barPosition用于设置Tabs的导航栏位置。

  • BarPosition.Start:导航栏位于顶部,默认值
  • BarPosition.End:导航栏位于底部

常见属性

属性名称属性说明属性默认值
vertical内容页和导航栏垂直方向排列false
scrollable控制滑动切换true
barMode控制导航栏是否可以滚动BarMode.Fixed

自定义导航栏

对于底部导航栏,一般作为应用主页面功能区分,为了更好的用户体验,会组合文字以及对应语义图标表示页签内容,这种情况下,需要自定义导航页签的样式。

设置自定义导航栏需要使用tabBar的参数,以其支持的CustomBuilder的方式传入自定义的函数组件样式。例如这里声明tabBuilder的自定义函数组件,传入参数包括页签文字title,对应位置index,以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否,决定UI显示的样式。

@Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {Column() {Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({ width: 25, height: 25 })Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')}.width('100%').height(50).justifyContent(FlexAlign.Center)
}

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

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

相关文章

git开发流程

分支介绍 master - 主分支 所有提供给用户使用的正式版本,都在这个主分支上发布 开发者在此分支 不可进行 push 操作 dev - 开发分支 日常开发所使用的分支,开发者完成的阶段性功能模块将首先被合并到此分支 此分支亦是团队内部测试、阶段性工作验证…

Xcode 16 beta3 真机调试找不到 Apple Watch 的尝试解决

很多小伙伴们想用 Xcode 在 Apple Watch 真机上调试运行 App 时却发现:在 Xcode 设备管理器中压根找不到对应的 Apple Watch 设备。 大家是否已将 Apple Watch 和 Mac 都重启一万多遍了,还是束手无策。 Apple Watch not showing in XCodeApple Watch wo…

C++基础语法:STL之容器(1)--容器概述和序列概述

前言 "打牢基础,万事不愁" .C的基础语法的学习 引入 STL是标准模板库,类模板主要是用来做容器的,所以个人理解:标准模板库是"标准容器库".容器是STL的核心 .以<C Prime Plus> 6th Edition(以下称"本书")内容理解容器. 类模板内容回顾 类…

NineData全面支持PostgreSQL可视化表结构设计

“PostgreSQL 是最像 Oracle 的开源关系型数据库“&#xff0c;也正因为如此&#xff0c;很多企业都青睐 PostgreSQL&#xff0c;拿它当成 Oracle 的替代品。所以毫无疑问&#xff0c;目前 PostgreSQL 在企业中非常常见。 对于直接接触 PostgreSQL 的开发人员而言&#xff0c;…

echarts多柱堆叠的X轴顺序

在一些图表场景中&#xff0c;需要显示多柱堆叠的数据&#xff0c;那么X轴上每一段单位区域内会有多根柱子&#xff0c;每一根柱子标识不同的数量项含义&#xff0c;那么怎样控制这几根柱的左右顺序呢&#xff1f; 其实这跟echarts的option里的series由关&#xff0c;开始我以为…

快速排序及归并排序的实现与排序的稳定性

目录 快速排序 一. 快速排序递归的实现方法 1. 左右指针法 步骤思路 为什么要让end先走&#xff1f; 2. 挖坑法 步骤思路 3. 前后指针法 步骤思路 二. 快速排序的时间和空间复杂度 1. 时间复杂度 2. 空间复杂度 三. 快速排序的优化方法 1. 三数取中优化 2. 小区…

实验丰富、原创改进!|多策略改进蜣螂优化算法(MATLAB)

本文内容来源于本人公众号&#xff1a;KAU的云实验台&#xff0c;更新内容&#xff1a;智能优化算法及其改进应用。 本文核心内容&#xff1a; 新颖的多策略改进蜣螂优化算法 对比算法包括&#xff1a;高引用/新发布/经典/其他DBO变体&#xff08;共11种&#xff09; 实验设计…

用c语言写一个贪吃蛇游戏

贪吃蛇游戏通常涉及到终端图形编程和简单的游戏逻辑。以下是一个基本的实现示例&#xff0c;包括贪吃蛇的移动、食物生成、碰撞检测等功能。 1. 贪吃蛇游戏的基本结构 贪吃蛇游戏可以分为以下几个部分&#xff1a; 游戏地图和终端绘制&#xff1a;使用二维数组表示游戏地图&am…

SpringBoot结合ip2region实现博客评论显示IP属地

你好呀&#xff0c;我是小邹。 在现代的Web应用中&#xff0c;特别是博客和论坛类网站&#xff0c;为用户提供地理定位服务&#xff08;如显示用户所在地理位置&#xff09;可以极大地增强用户体验。本文将详细探讨如何使用Java和相关技术栈来实现在博客评论中显示用户的地址信…

Java实验3

实验内容 学生信息管理系统 学生成绩表Student(Sno 字符串&#xff0c;长度9, Sname 字符串&#xff0c;长度10, Class 字符串&#xff0c;长度10, Age 整型, Sex 字符串&#xff0c;长度2) 实现如下功能&#xff1a; A&#xff0e;输入若干个学生的信息到Student表&#x…

初学Python必须知道的14个强大单行代码

引言&#xff1a;Python的魅力与单行代码的重要性 Python以其简洁明了的语法、丰富的内置函数和强大的第三方库深受广大开发者喜爱。尤其对于编程小白来说&#xff0c;学习Python就像打开了一扇通向编程世界的大门。而单行代码&#xff0c;作为Python魅力的一部分&#xff0c;…

【NetTopologySuite类库】合并所有几何的包围盒AABB

流程示意图 示例代码 using GeoAPI.Geometries; using Microsoft.VisualStudio.TestTools.UnitTesting; using NetTopologySuite.Geometries; using NetTopologySuite.IO; using System.Collections.Generic; using System.Linq;namespace Test472 {[TestClass]public class T…

深度解析:电商订单API及其技术实现

随着电子商务的发展&#xff0c;实体企业开拓电商渠道的越来越多&#xff0c;原有的管理系统都需要增加电商业务管理功能&#xff0c;其中&#xff0c;对电商订单的管理是每一个电商商家都需要的功能&#xff0c;所以对于开发者来说&#xff0c;了解电商API是什么是非常重要的&…

第100+16步 ChatGPT学习:R实现Xgboost分类

基于R 4.2.2版本演示 一、写在前面 有不少大佬问做机器学习分类能不能用R语言&#xff0c;不想学Python咯。 答曰&#xff1a;可&#xff01;用GPT或者Kimi转一下就得了呗。 加上最近也没啥内容写了&#xff0c;就帮各位搬运一下吧。 二、R代码实现Xgboost分类 &#xff08…

LeetCode题练习与总结:比较版本号--165

一、题目描述 给你两个 版本号字符串 version1 和 version2 &#xff0c;请你比较它们。版本号由被点 . 分开的修订号组成。修订号的值 是它 转换为整数 并忽略前导零。 比较版本号时&#xff0c;请按 从左到右的顺序 依次比较它们的修订号。如果其中一个版本字符串的修订号较…

C++动态内存的管理

今天来分享C动态内存管理相关知识&#xff0c;闲言勿谈&#xff0c;直接上干货。 1. 动态内存的开辟和销毁(new和delete) (1)前置知识&#xff1a;我们知道c语言有malloc和calloc和realloc三个函数可以进行动态的开辟内存&#xff0c;那么它们有什么区别呢&#xff1f;首先是…

MPS 后端

本文来自&#xff1a; https://pytorch.org/docs/stable/notes/mps.html https://pytorch.ac.cn/docs/stable/notes/mps.html MPS 后端 mps 设备支持 在使用 Metal 编程框架的 MacOS 设备上&#xff0c;进行高性能 GPU 训练。 它引入了新的设备&#xff0c;将机器学习计算图和…

【C语言】条件运算符详解 - 《 A ? B : C 》

目录 C语言条件运算符详解1. 条件运算符的语法和使用示例 1&#xff1a;基本用法输出 2. 嵌套条件运算符示例 2&#xff1a;嵌套条件运算符输出 3. 条件运算符与 if-else 语句的比较示例 3&#xff1a;使用 if-else 语句示例 4&#xff1a;使用条件运算符 4. 条件运算符的实际应…

PLC_博图系列☞基本指令”TONR:时间累加器“

PLC_博图系列☞基本指令”TONR&#xff1a;时间累加器“ 文章目录 PLC_博图系列☞基本指令”TONR&#xff1a;时间累加器“背景介绍TONR&#xff1a; 时间累加器说明参数脉冲时序图示例 关键字&#xff1a; PLC、 西门子、 博图、 Siemens 、 TONR 背景介绍 这是一篇关于P…

ElasticSearch学习之路

前言 为什么学ElasticSearch&#xff1f; 数据一般有如下三种类型&#xff1a; 结构化数据&#xff0c;如&#xff1a;MySQL的表&#xff0c;一般通过索引提高查询效率非结构化数据&#xff0c;如&#xff1a;图片、音频等不能用表结构表示的数据&#xff0c;一般保存到mong…