想实现一个简单的滚动容器。例如水平排列10个图标，可以左右滑动查看的。

Egret里有布局容器可以滚动

Laya看了教程和示例，没有找到一个滚动容器，只有一个list，需要设置item，显然不是我想要的简单水平滚动容器。

示例教程里没有滚动容器的示例

组件教程里也没有滚动容器，也没有垂直和水平布局容器。

最后找到了panel+hbox组合成水平滚动容器

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

二  设置panel滚动条和hbox的space

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

如果不设置hbox的space，这个hbox也不会水平排列的

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

三 最终效果

四 其他

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

Egret中设置视口位置是viewport.scrollH  scrollV

Laya中是设置滚动容器的滚动条value值：panel.hScrollBar.value

Laya的滚动容器的更多相关文章

  1. Flutter: AnimatedList 一个滚动容器，可在插入或移除项目时为其设置动画

    Flutter Widget of the Week import 'dart:math'; import 'package:flutter/material.dart'; void main() = ...

  2. bootstrap源码分析之scrollspy（滚动侦听）

    源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项2.导航必须是 .nav > li > a 结构,并且a ...

  3. （9）UI（容器）

    1.基础容器   基础容器可以设置子容器布局.是否裁切子元素.填充颜色.背景图片资源等属性.   使用场景.   在官方示例中,大量使用了基础容器作布局管理,如下面的主界面中,用户名称,钻石和金币就使 ...

  4. 【转载/修改】ScrollLayout代码修正，追加模仿viewpager滚动速度

    组件作用为类似ViewPager但直接插视图的横向滚动容器. 修改自:http://blog.csdn.net/yaoyeyzq/article/details/7571940 在该组件基础上修正了滚 ...

  5. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

  6. 仿腾讯课堂固定滚动列表ReactNative组件

    前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的比较乱,周末花了点时间重写梳理下做的东西 ...

  7. 移动端无限滚动 TScroll.vue组件

    // 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...

  8. bootstrap源码之滚动监听组件scrollspy.js详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...

  9. web移动端浮层滚动阻止window窗体滚动JS/CSS处理

    CSS代码: .noscroll, .noscroll body { overflow: hidden; } .noscroll body { position: relative; } JS代码: ...

随机推荐

  1. 《大象 Thinking in UML》读书笔记：Process-oriented vs. Object-oriented

    前言 面向过程 还是 面向对象?这不仅仅是个软件工程术语,其问题甚至可以追溯到亚里士多德:您把这个世界视为过程还是对象? 回归到现今的软件行业,这不仅仅是个某个具体编程技术问题,更是认识论问题. 认识 ...

  2. js获取ip内网地址

    <script type="text/javascript"> function getUserIP(onNewIP) { // onNewIp - your list ...

  3. Keil MDK5生成 .bin文件的简单教程(图文)

    以下参考https://blog.csdn.net/u014563989/article/details/51127519,同时自己实测. 1.按如图步骤做,主要是要找到fromelf.exe的路径: ...

  4. navicat 远程连接服务器1130,1045问题报错处理

    本人踩坑多次,一开始网上搜罗,解决办法大同小异,摸索了很久才全部解决完成,小小bug真磨人啊 首先,根据我的踩坑记录,navicat 1045和navicat 1130貌似属于同一种解决方案,都是修改 ...

  5. ubuntu18.04 + python3 安装pip3

    最近在学习python 网络爬虫,正好接触到python的requests模块 我的开发环境是ubuntu18.04+python3,这个系统是默认自带了python3,且版本是python 3.6. ...

  6. Centos7安装Hadoop2.7

    准备 1.三台Centos7的机器: hostname IP地址 部署规划 node1 172.20.0.4 NameNode.DataNode node2 172.20.0.5 DataNode n ...

  7. ARDUIN人体检测模块

    http://henrysbench.capnfatz.com/henrys-bench/arduino-sensors-and-input/arduino-hc-sr501-motion-senso ...

  8. 【洛谷P5158】 【模板】多项式快速插值

    卡常严重,可有采用如下优化方案: 1.预处理单位根 2.少取几次模 3.复制数组时用 memcpy 4.进行多项式乘法项数少的时候直接暴力乘 5.进行多项式多点求值时如果项数小于500的话直接秦九昭展 ...

  9. proc near/far

    proc是定义子程序的伪指令,位置在子程序的开始处,它和endp分别表示子程序定义的开始和结束两者必须成对出现. far是该子程序的属性,决定调用程序和子程序是否在同一代码段如下:为子程序定义及说明, ...

  10. Cogs 739. [网络流24题] 运输问题(费用流)

    [网络流24题] 运输问题 ★★ 输入文件:tran.in 输出文件:tran.out 简单对比 时间限制:1 s 内存限制:128 MB «问题描述: «编程任务: 对于给定的m 个仓库和n 个零售 ...