Laya的滚动容器Panel+HBox

最新推荐文章于 2022-08-22 14:21:43 发布
原创 最新推荐文章于 2022-08-22 14:21:43 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Laya 2.2.0中使用Panel和HBox创建滚动容器，并设置了滚动条皮肤。通过拖放操作将图片放入HBox，详细讲解了滚动条设置和布局效果。最终展示了滚动容器的视觉效果，并提到了如何设置滚动视口位置、隐藏滚动条以及监听HBox中的点击事件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

版本：Laya 2.2.0

参考：https://ldc2.layabox.com/doc/?nav=zh-ts-3-3-18

 

一   拖动一个panel和hbox到舞台，并且在hbox里放图片

 

 

 

二  设置panel滚动条

如果不设置panel的滚动条skin，这个panel是不会滚动的

拖动assets/comp/hscroll.png到属性面板hScrollBarSkin上

 

 

 

hbox的布局效果，只有在运行时才能看见 

 

三 最终效果

 

四 其他

1. 设置滚动容器视口位置

设置视口位置在100，设置滚动容器

最低0.47元/天 解锁文章

200万优质内容无限畅学
Laya的List组件+滚动条
xuniwawa010的专栏
07-10 2091
版本：2.2.0 官网教程：https://ldc2.layabox.com/doc/?nav=zh-ts-3-3-7 下面以《绯雨骑士团》的服务器选择列表为例子。 一创建List 首先创建一个List组件，我命名为serverList。 （不用像laya教程里那样，还要转换类型什么的，太麻烦） 设置list的renderType属性为render，不设置没法滚动。 二创建Item 然后创建List的Item组件。我这里item是一个scene自定义...
【Laya游戏开发实战（一）】富文本HTMLDivElement + Panel 实现滚动
qq_31713583的博客
06-29 863
在laya开发中有时需要显示多行文字，用Label虽然可以换行显示但是当文字数量达到一定程度时就不太好用了，所以换成HTMLDivElement 富文本框显示文字，但是因为HTMLDivElement控件本身是不带滚动条的，所以需要配合 Panel，将Panel设置成HTMLDivElement 的父节点，并设置Panel的滚动条就可以滚动HTMLDivElement 里的内容 ...
Laya的滚动容器
gamedaybyday
09-27 1479
想实现一个简单的滚动容器。例如水平排列10个图标，可以左右滑动查看的。 Egret里有布局容器可以滚动 Laya看了教程和示例，没有找到一个滚动容器，只有一个list，需要设置item，显然不是我想要的简单水平滚动容器。 示例教程里没有滚动容器的示例 组件教程里也没有滚动容器，也没有垂直和水平布局容器。 最后找到...
laya用panel实现拖动效果（拉地图效果）
远行的博客
10-29 6135
layabox最常见的拖动效果是用list实现的，但是也可以用panel实现，并且，panel组件的功能之一就是用来实现拖动的，不存在说panel比list实现拖动更好。 用panel实现拖动时，需要给panel添加子容器，例如box，然后再往子容器box中添加想要滑动的内容，在box尺寸内的可见，在box外的不可见，通过设置panel的scrollbar的value值，还可以控制滑动以及设置b...
Laya---竖向滚动列表
学海无涯
08-22 647
laya竖向滚动列表
Laya3D 自定义shader + 实时阴影
ZVINK的博客
10-15 5289
Laya3D 自定义shader + 实时阴影1 ShaderDefines2 详细步骤1 打开DirectionLight 的投射阴影2 继承BaseMaterial 自定义Material编写3 自定义shader编写 ，参照laya源码里面的blinnPhong Shader4 设置材质，MeshRender打开阴影 Laya自带的默认材质 BlinnPhongMaterial 是支持实时阴...
panel滚动区域
远行的博客
09-19 1042
panel是LAYA提供的一种滚动组件，LIST也可以滚动。 给panel直接添加子元素，发现panel的滚动区域有点大，最后一个子元素可以一直滑到panel中间，而策划想要的效果确实panel的最后一个子元素，滑到panel边缘就不要再滑动。 实现方法是在UI编辑器里面给panel添加一个子元素box，把原本需要添加到panel的元素添加到box，设置一个变量tempY记录box所有子元素的...
基于Layabox+Unity制作的模型展示场景源码（鼠标、手指操控）.zip
04-09
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目...基于Layabox+Unity制作的模型展示场景源码（鼠标、手指操控）.zip
laya ts fgui的list滚动列表设置
qq_40390815的博客
01-18 1557
FGUI如何拼接list功能以及如何代码实现
Laya_TS 调用调试面板
Fanstasic的博客
05-30 2225
第一步，在index.html中加入以下代码 <script type="text/javascript" src="libs/laya.debugtool.js"></script> 第二步，在初始化舞台Laya.init();后任意地方添加 Laya.DebugPanel.init();//调用DebugPanel调试面板 Laya.DebugTool.init...
LayaBox List使用记录 创建 增加 修改 滚动
qq2588258的博客
07-17 1862
官方链接：https://ldc.layabox.com/doc/?nav=zh-ts-6-0-0 看过官方文档后 如上图进行四步操作 1 红框部分是每个item的内容，创建好后，选中这几个控件然后ctrl+B将他们转化为容器，点确定，黄框部分就被创建出来了， 2同样的操作 Ctrl+B 将黄框部分转化为list ，这时候蓝色的list的就被创建了 ，根据图里的层级关系 很容易理解， 3然后右键...
layaList
weixin_42369486的博客
11-22 1213
scene  import RoleChangeView from './RoleChangeView' export default class RoleChangeScene extends Scene { constructor() { super() let roleChangeView = new RoleChangeView() ...
LayaAir UI 组件 # HSlider,VSlider(水平/垂直滑动条)
蚩尤后裔-汪茂雄
12-28 3549
目录 HSlider 组件 默认资源 VSlider 组件 自定义资源 HSlider 组件 Package laya.ui 类 public class HSlider Inheritance HSlider Slider Component Sprite Node EventDispatcher Object 1、HSlider 与 VSlider ...
任务6：利用scrollBar控制滚动文本
m0_56811106的博客
09-04 503
一、任务目标 上一个任务我们讲到文本控制在游戏中的主要作用，而且采用鼠标点击文本域从而控制文本滚动，那么该任务我们就来学习scrollBar控制文本的滚动。 二、任务分解 2.1 熟悉scrollBar常用属性 官方API：https://layaair2.ldc2.layabox.com/api2/Chinese/index.html?version=2.12.1beta&type=2D&category=UI&class=laya_ui_scrollbar.scrollbar#c
LayaBox中给List中元素添加选中边框高亮的方法
Rajon_94的博客
08-08 1239
目录结构如下： 其中Rect是设置的高亮边框 方法1：        将Image的name设为“selectBox”，然后将visible设为false，此时Laya会自动处理高亮边框问题。 方法2：（偏方）         找到img_line对象，然后通过img_line._graphics._one[4]控制Rect的fillColor属性，img_line._graphic...
Laya 实操七：自定义监听事件
JPF29
07-03 1164
自定义监听事件 export default class Test extends Laya.Script { constructor() { super(); } onStart(){ Laya.timer.loop(3000,this,function () { this.owner.event("aaa",100); }); } } export default class Test1 extends.
LayaBox游戏项目实录二：战斗记录Panel组件优化
ACG_Angel
08-02 442
游戏战斗记录貌似每个游戏都有，一场战斗下来，可能记录的数据多达上千条，多人回合制记录的甚至更多。 那么，对于超过一千条甚至更多的记录条数，在panel组件中有两种显示方式： 一、创建1000多条item（可能是一个HTMLDivElement）,带颜色已经链接的条目。 二、创建10~30条item,进行1000多条的复用。 那么经过测试，1000条item照成的性能下降是显而易见的，FPS直接从60 降到了 20，画面出现不流畅甚至卡的感觉，由于游戏项目面向微信小游戏和移动端，性能要求很高，创建10
Hbox设置居中
pbegonia的专栏
03-01 3911
hbox.setSpacing(100); hbox.setAlignment(Pos.CENTER); 设定控件的间隔和设定控件的位置为居中
laya panel
最新发布
01-02
### LayaAir 引擎 Panel 组件使用教程 #### 创建Panel组件 在LayaAir引擎中，`Panel`是一个常用的容器组件，用于承载其他UI元素。为了创建并初始化一个Panel实例，可以采用如下方式： ```javascript let panel = new laya.ui.Panel(); panel.skin = "path/to/your/skin.png"; // 设置皮肤文件路径[^1] ``` #### 添加子项到Panel 一旦有了Panel对象，则可以通过其提供的API向其中添加更多控件或组件。 ```javascript // 假设有一个已经存在的Button实例buttonInstance panel.addChild(buttonInstance); ``` 对于更复杂的布局需求，还可以利用数据绑定特性简化操作流程。例如当处理列表形式的数据展示时，可借助于`List`组件配合模板渲染机制完成高效视图构建。 #### 自定义样式与交互逻辑 除了基本属性配置外，针对特定业务场景下的个性化定制同样重要。这不仅涉及到外观调整（如背景颜色、边框等），还包括响应用户的输入行为——点击事件监听就是一个典型例子。 ```javascript panel.on(Laya.Event.CLICK, this, function () { console.log("Panel clicked!"); }); ``` 另外值得注意的是，在实际项目开发过程中往往会对官方给出的基础构件做进一步封装扩展，形成一套适应自身应用特点的UI框架体系结构[^2]。 #### 实际案例分析 考虑到不同开发者的工作习惯差异较大，下面提供了一个简单的示例用来说明如何快速搭建起带有导航栏功能的小型管理后台页面原型。此部分主要围绕着几个核心要点展开讨论：整体架构规划；各模块间通信协作模式设计思路分享以及性能优化建议等方面内容[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值