【HarmonyOS】低代码平台组件拖拽使用技巧之滚动容器

news2024/11/16 7:22:25

 【关键字】

HarmonyOS、低代码平台、组件拖拽、滚动容器

1、写在前面 上一篇中我们介绍了低代码平台组件库中的堆叠容器的一些拖拽技巧,本篇我们继续,今天带大家一些来看一个新的组件——滚动容器。关于滚动容器的直接使用其实很简单,所以这个不是今天的重点,今天的重点是如何在原有布局的基础上在外层套上一个滚动容器,废话不多说了,开始吧! 2、开发实战 先来快速的看一下滚动容器如何直接使用?

首先页面中是一个垂直容器中拖入了一个文本组件用作标题,然后从组件库中拖入一个滚动容器,设置滚动容器的宽高之后,再往滚动容器中拖入一个垂直容器,这里需要注意,滚动容器它的内部是有且只有一个子容器,所以我们这里是拖入了一个垂直容器用来做后续其它容器的父容器,接着我们快速拖拽几个图片组件将滚动容器给撑开,顺利的话你可以看到页面上已经出现滚动条了,这里提供一张动图展示:

1.gif

接下来我们重点来看一下如何在原有布局的基础上在外层嵌套一个滚动容器。

首先我们先准备一个高度超过整个屏幕高度的页面布局,这里我使用一个垂直容器里面放了一些组件:

cke_5614.png

然后我们来实际操作一下如何在垂直容器的外层添加一个滚动容器。

从组件库中拖拽一个滚动容器拖到画布中页面的最上方,这里可以看一下绿色的线,等到绿色的线在布局最上方时松开鼠标,接着选中下方整个垂直容器的所有组件,将它整体拖动到滚动容器里面,注意这里不要选中页面上的十字花拖动,选中整个垂直容器拖动。最后修改滚动容器的宽为100%,高为自动,下面一起来看一下完整的操作:

2.gif

OK,到这里,我们就已经可以看到页面可以滚动了,右侧也已经出现了滚动条。

今天的内容就到这里,下期再会!

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

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

相关文章

2023年医药商业行业发展研究报告

第一章 行业概况 1.1 定义 医药商业行业,作为医药领域的重要组成部分,扮演着至关重要的角色。这一行业专注于医药商品的经营与流通,确保药品能够有效、安全地到达消费者手中。随着医药科技的进步和市场需求的增长,医药商业行业在…

uni-app编程checkbox-group获取选中的每个checkbox的value值

uni-app编程checkbox-group获取选中的每个checkbox的value值_uniappcheckboxvalue-CSDN博客

前端-Vue-element-开发指南

电商管理系统框架 Vue-element 电商管理系统 电商管理系统框架1 介绍了解 项目实战的学习目标2 电商项目基本业务概述3 后台管理系统功能划分4 项目开发模式技术选型5 项目初始化可视化面板 配置 6 配置码云SSH7 托管云8 安装mysql9 API服务器Postman调试10 分析登陆和token原理…

信钰证券:买基金有哪些平台?

跟着人们理财意识的前进,出资基金成为了一种受欢迎的方法。但是关于一般出资者来说,在许多的基金公司平缓台中选择一个可靠的、确保出资安全的途径来购买基金却是一件扎手的作业。本文将从多个角度剖析不同的购买途径,以协助出资者作出更正确…

手写 分页

子组件&#xff1a;TimePage.vue 效果图 <template><div class"click-scroll-X"><!-- 上 --><!-- eslint-disable-next-line --><span class"left_btn" :disabled"pageNo 1" click"leftSlide"><&…

记录一次线上fullgc问题排查过程

某天&#xff0c;接到测试部门反馈说线上项目突然很快&#xff0c;由于当前版本代码和上一版本相比就多了一个刚上线了一个5分钟1次的跑批任务&#xff0c;先关闭次任务后观察是否卡顿&#xff0c;并检查堆内存是否使用完造成频繁gc 1.通过jmap命令查看堆内存中的对象 2.生成当…

解决:uniapp项目中调用小程序的chooseAddress() API失效

目录 问题描述 解决方案 问题描述 使用 Hbuilder X 编辑器和 uni-app 框架开发小程序项目&#xff0c;在调用小程序提供的 uni.chooseAddress() API实现选择收货地址的功能时&#xff0c;点击选择收货地址没有反应&#xff0c;获取不到用户收货地址&#xff0c;API失效了 …

【python获取.doc内表格指定单元格数据】

python获取.doc内表格指定单元格数据 需求说明代码部分 需求说明 读取.doc内表格中指定数据并以对象形式输出 1、获取第一张表内&#xff1a;部门编码、物料编码、退库数量(数字型)、物料质量问题描述、物料来源、填写人数据 2、获取第二张表格内&#xff1a;采购人员ID案例表…

简单列举客户关系管理系统的核心功能

CRM客户关系管理系统能够帮助企业收集、管理、维护客户信息&#xff0c;轻松跟进客户全过程&#xff0c;提供高质量的客户服务&#xff0c;通过数据分析为管理数据赋能。CRM系统能够让企业以客户为中心&#xff0c;实现全维度管理。那么&#xff0c;CRM系统的核心功能有哪些&am…

如何实现全网采集

品牌在控价过程中&#xff0c;需要对产品链接的价格进行监测&#xff0c;监测就要先做采集&#xff0c;采集完成后&#xff0c;再对数据进行促销信息的汇总计算&#xff0c;得出到手价&#xff0c;输出低价报表&#xff0c;从过程中可以看出&#xff0c;采集是非常关键的一步&a…

简单理解JS回调函数(callback)

一、回调函数到底是什么&#xff1f; 其实回调函数&#xff08;没有调用也会执行&#xff09;就是一个参数&#xff0c;把这个参数传到另一个函数里面&#xff0c;也就是主函数里面&#xff0c;当主函数里面的事情干完再回头去执行当做参数传进去的回调函数&#xff0c;回头去调…

Kelper.js 笔记 python交互

1 加载Kepler 地图 KeplerGl() 1.1 主要参数 height 可选 默认值&#xff1a;400 地图显示的高度 data 数据集 字典&#xff0c;键是数据集的名称 config地图配置字典 1.2 举例 from keplergl import KeplerGlmap_KeplerGl() map_ 默认的位置 1.3 添加自己的图 1.3.1 读…

关键词搜索苏宁商品列表数据,苏宁商品列表数据接口,苏宁API接口

在网页抓取方面&#xff0c;可以使用 Python、Java 等编程语言编写程序&#xff0c;通过模拟 HTTP 请求&#xff0c;获取苏宁网站上的商品页面。在数据提取方面&#xff0c;可以使用正则表达式、XPath 等方式从 HTML 代码中提取出有用的信息。值得注意的是&#xff0c;苏宁网站…

试过GPT-4V后,微软写了个166页的测评报告,业内人士:高级用户必读

一周之前&#xff0c;ChatGPT迎来重大更新&#xff0c;不管是 GPT-4 还是 GPT-3.5 模型&#xff0c;都可以基于图像进行分析和对话。与之对应的&#xff0c;多模态版GPT-4V模型相关文档也一并放出。当时 OpenAI 放出的文档只有18页&#xff0c;很多内容都无从得知&#xff0c;对…

作战仿真试验理论体系研究

源自&#xff1a;装甲兵工程学院学报 作者&#xff1a;徐享忠&#xff0c;杨建东&#xff0c;郭齐胜 “人工智能技术与咨询” 发布 摘要 建立了作战仿真试验的概念框架&#xff0c;以预测论、作战仿真理论和试验理论为基础理论&#xff0c;以仿真试验目标、仿真试验模式、…

Java基于SpringBoot+Vue的汽车租赁系统

1 简介 致远汽车租赁管理方面的任务繁琐,以至于公司每年都在致远汽车租赁管理这方面投入较多的精力却效果甚微,致远汽车租赁系统的目标就是为了能够缓解致远汽车租赁管理工作方面面临的压力,让致远汽车租赁管理方面的工作变得更加高效准确。 文章首发地址 2 技术栈 开发语言…

Kubernetes核心组件Services

1. Kubernetes Service概念 Service是kubernetes最核心的概念&#xff0c;通过创建Service&#xff0c;可以为一组具有相同功能的POD&#xff08;容器&#xff09;应用提供统一的访问入口&#xff0c;并且将请求进行负载分发到后端的各个容器应用上。 在Kubernetes中&#xf…

vue项目打包后使用reverse-sourcemap反编译到源码(详解版)

首先得说一下&#xff0c;vue项目中productionSourceMap这个属性。该属性对应的值为true|false。 当productionSourceMap: true,时&#xff1a;   1、打包后能看到xxxx.js.map文件,map文件够通过反编译看到源码;   2、打包后会导致文件变大(因为多了很多map文件导致的)&…

智慧政务大屏建设方案

智慧政务大屏建设方案是为政府部门提供信息化展示和决策支持的重要工具。下面将提供一个详细的智慧政务大屏建设方案&#xff0c;包括硬件设备、软件平台和功能模块等。 **一、硬件设备** 智慧政务大屏的硬件设备需要满足以下基本要求&#xff1a; 1. 显示屏&#xff1a;选择…

网页游戏的开发流程

网页游戏的开发流程可以根据项目的规模和复杂性而有所不同&#xff0c;但通常包括以下一般步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.需求分析&#xff1a; 确定游戏的概念、目标受众和核…