HarmonyOS布局之scroll

news2025/1/24 11:33:20

对于Scroll 布局官方讲解非常好,我在这做个总结,主要结合实际应用进行补充
Scroll — 首先他是一个容器布局,所有的容器布局都可包含子布局,因此scroll 布局也可包含子组件但是(他只能包含一个子组件),
这里面有一个概念,容器的内有一个子组件,比如京东的首页可滑动的区域为黑色的部分,而整体的黑色区域又分为banner区域,金刚区域,商品展示形式1区域,和商品展示2区域,(顶部的tabs没有写出来,也属于滑动区域)

在这里插入图片描述
**仅仅banner 区域就有3个image, 怎么会是滑动的区域只有一个组件呢?
所以这里有个细节:所有的容器组件内如果有另一个容器组件A,那么这个A就属于这个父容器的单个组件,而容器A内可以有多个容器组件。**并且容器A内可以有多个容器,但是如果滑动组件里面有容器A,和容器B两个组件,滑动的区域只有容器A例如:

在这里插入图片描述
以上滑动容器scroll 组件包含了两个容器组件,分别为column() 容器A 和column() 容器B,滑动的后的结果只展示容器A,*那么如何能将容器B的内容也进行滑动?
答:将容器B的放入容器A
,成为容器A的子组件如下图
在这里插入图片描述
备注:容器想滑动,必须子组件的内容大于一屏幕

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

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

相关文章

wordpress主题modown v8.81+erphpdown v16.0无限制无授权开心版

修复bug(v8.81 2023.03.07) 新增文章页正文下面常见问题手风琴模块,可设置显示文章的更新日期而不是发布日期,首页幻灯片支持指定文章、支持一个大图4个小图显示,grid网格列表支持显示简介,前台个人中心里显…

Odoo16 实用功能之在Tree视图的记录中加入按钮

Tree视图中添加按钮&#xff0c;通常使用<button>标签 只能有一列来显示这些按钮 代码示例&#xff1a; <tree><field name"name" /><button name"test001" class"text-warning" type"object" string"Resc…

NHANES数据库周报(12.6)

郑老师统计课程&#xff0c;欢迎点击报名&#xff1a;Nhanes公共数据库挖掘 课程 美国国家健康和营养检查调查&#xff08;NHANES&#xff09;是一项旨在评估美国成人和儿童健康和营养状况的研究计划。该调查的独特之处在于它结合了访谈和体格检查。由美国疾病控制和预防中心&a…

Java日志框架Logback

logback.xml文件配置(放在src下微服务建议放在resources下) <?xml version"1.0" encoding"UTF-8"?> <configuration><!--定义日志文件的存储地址,使用绝对路径--><property name"LOG_HOME" value"d:/logs"/>…

【Linux笔记】系统信息

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux学习 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 命令 1. uname - 显示系统信息 2. hostname - 显示或设置系统主机名 3. top - 显示系统资源使用情况 4. df - 显示磁盘空间使用情…

eclipse中基于maven构建的web项目pom.xml中指定的jar包无法发布到tomcat中

eclipse运行maven web项目报错&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 信息: Star…

EDA实验-----直流电机驱动设计(Quartus II )

目录 一、实验目的 二、实验仪器设备 三、实验的重点和难点 四、实验原理 五、实验步骤 六、实验报告 七、实验过程 1.分频器代码 2.方向选择器 3.直流电动机工作原理 4.电路连接图 5.文件烧录 一、实验目的 了解直流电机控制的工作原理和实现的方法。掌握PWM波控…

农学小作业(根据降雨量计算排灌水量)(旱地版)

//------------------------------------------------------------------------------------------------------------------- //农学小作业(根据降雨量计算排灌水量)(旱地版) //01.参考书目:ISBN-7-80734-087-8.ISBN-7-80124-644-6. //01.农作物生长发育阶段需要消耗水份. //0…

Deepin更换仿Mac主题

上一篇博客说了要写一篇deepin系统的美化教程 先看效果图&#xff1a; 准备工作&#xff1a; 1.你自己 嘻嘻嘻 2.能上网的deepin15.11电脑 首先去下载主题 本次需要系统美化3部分&#xff1a;1.图标 2.光标 3.壁纸 开始之前&#xff0c;请先把你的窗口特效打开&#xff0c;…

【MVT_1703230471】基于Python NLTK分词、词云、LDA主题分类及GPT情感分类

【Talk is cheap】 1 数据探索 case idcase outcome case title case text 0 Case1 cited Alpine Hardwood (Aust) Pty Ltd v Hardys Pty Lt... Ordinarily that discretion will be exercised s... 1 Case2 cited Black v Lipovac [1998] FCA 699 ; (1998) 217 AL... The gen…

Epson爱普生手臂机器人与PC通讯 C#

一、Epson手臂配置 1.安装Epson手臂控制软件 安装Epson手臂控制软体EPSON RC+ 7.0(根据实际需求下载应用),可以去官网下载安装。 2.硬件配置 准备一台PC,用网线连接PC和EPSON手臂控制器。 3.在PC上修改IP地址 EPSON手臂默认IP(192.168.0.1),PC IP改为手臂同一网段…

歌曲春节回家:荆涛歌声中的深情与诗人的心声

歌曲春节回家&#xff1a;荆涛歌声中的深情与诗人的心声 在寒冬的寂静中&#xff0c;荆涛的歌声如同春风拂面&#xff0c;温暖而深情。它唤起了我们对家的思念&#xff0c;让我们感受到家的温暖和亲情的珍贵。而在歌声中&#xff0c;我们仿佛听到了那些描绘春节的经典诗句&…

pycharm修改项目文件夹名称

目录 1 修改项目文件夹名称 2 修改代码中的项目名称 1 修改项目文件夹名称 选中项目文件夹&#xff0c;右键&#xff0c;选择refactor-rename。 选择rename project&#xff1a; 然后输入新的项目名称。 此时进入资源管理器&#xff0c;修改项目文件夹的名字&#xff0c;完成…

Linux 一键部署二进制Gitea

gitea 前言 Gitea 是一个轻量级的 DevOps 平台软件。从开发计划到产品成型的整个软件生命周期,他都能够高效而轻松的帮助团队和开发者。包括 Git 托管、代码审查、团队协作、软件包注册和 CI/CD。它与 GitHub、Bitbucket 和 GitLab 等比较类似。 Gitea 最初是从 Gogs 分支而来…

EarMaster Pro 7 简体中文破解版 v7.2.0.42 电脑版

软件介绍 EarMaster破解版一款功能强大的专业级别多媒体音乐教育学习软件&#xff0c;EarMaster破解版提供了大量音乐相关的学习内容&#xff0c;用户在这里可以学习基础的和弦、音阶、节奏&#xff0c;也可以提升自己的音感&#xff0c;如果基础已经很扎实了&#xff0c;还可…

vue3 + TypeScript使用国际化

vue3 TypeScript使用国际化 本文使用了 Vite 构建工具创建的vue3项目Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块Vite 官方中文文档当然如果你的vue3项目未使用vite,你也可以为你的旧项目提提速&#xff0c;安装vite &#xff0c;安装方法在上一个博客…

ubuntu 18.04 共享屏幕

用于windows远程ubuntu 1. sudo apt install xrdp 2. 配置 sudo vim /etc/xrdp/startwm.sh 把最下面的test和exec两行注释掉&#xff0c;添加一行 gnome-session 3.安装dconf-editor : sudo apt-get install dconf-editor 关闭require encrytion org->gnome->desktop…

js中将数字转成中文

文章目录 一、实现二、最后 一、实现 如果要将数字10、100和1000转换成中文的"十"、“一百"和"一千”&#xff0c;可以使用以下 JavaScript 代码实现&#xff1a; function numberToChinese(num) {const chineseNums [零, 一, 二, 三, 四, 五, 六, 七, …

华为防火墙小企业简单应用命令行配置

实现&#xff1a; 1、内网访问外网 2、内网和外网访问dmz区ftp服务器 3、开启ftp的aspf功能 4、开启内网黑洞功能 防火墙配置&#xff1a; interface GigabitEthernet1/0/0 undo shutdown ip address 10.0.0.1 255.255.255.0 service-manage ping permit interface GigabitEth…

【Hadoop】 YARN 运行过程/YARN设计目标

YARN 运行过程剖析YARN设计目标 YARN 运行过程剖析 一个Job在YARN中的处理过程&#xff1a; 客户端向RM提交一个job&#xff0c;进入RM中的调度器队列以供调度RM中的AppManager与NM协商协商好一个容器&#xff0c;以启动一个App Master实例App Master启动之后向RM注册并根据Jo…