Laya的滚动容器

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

Egret里有布局容器可以滚动

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

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

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

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

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

二  设置panel滚动条和hbox的space

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

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

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

三 最终效果

原文地址:https://www.cnblogs.com/gamedaybyday/p/11599646.html

时间: 2024-11-09 03:06:29

Laya的滚动容器的相关文章

bootstrap源码分析之scrollspy(滚动侦听)

源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey3.菜单上必须有.nav样式4.滚动区域的data-target与导航父级Id(一定是父级)要一致 <div id="selector" class="navbar navbar-default"> &l

如何实现内滚动布局

既然是内滚动,就有必要干掉浏览器原生<html>的滚动条,这个很简单: html { overflow: hidden; } HTML主结构示意如下: body -- page -- header -- side -- content 我们可以利用绝对定位元素的拉伸特性,使内滚动容器高度自适应匹配. .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 应该很好理解,绝对定位,满屏拉伸,等同于: .page {

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

这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认为1张,另外提供了连个外接方法, 停止自动滚动$.fn.roll.stop,继续自动滚动$.fn.roll.auto,不多说,上菜! JQ插件代码 (function($){ $.fn.roll = function(options){ if($(this).length == 0) return

BetterScroll 在移动端滚动场景的应用

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件( GitHub地址 ),适用于滚动列表.选择器.轮播图.索引列表.开屏引导等应用场景. 为了满足这些场景,它不仅支持惯性滚动.边界回弹.滚动条淡入淡出等效果的灵活配置,让滚动更加流畅,同时还提供了很多 API 方法和事件,以便我们更快地实现滚动场景下的需求,如下拉刷新.上拉加载. 由于它基于原生 JavaScript 实现,不依赖任何框架,所以既可以原生 JavaScript 引用,也可以与目前前端 MVVM 框架结合使用

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

前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的比较乱,周末花了点时间重写梳理下做的东西. 项目地址 在这里,如果有好的意见欢迎提 issue或pr. 开始 我们先来看下,腾讯课堂视频播放详情页面是怎么样的? 咋一看界面感觉有点复杂,其实简化来说,这个界面可以看成tab组件+scroll组件.哲学上说,要抓好主要矛盾与次要矛盾,这个问题的主要矛盾是scroll组件实现,也就是最外层的R

js 页面图片等元素在普通元素中滚动动态加载技术

/*! * 2012-01-13 v1.1 偏移值计算修改 position → offset * 2012-09-25 v1.2 增加滚动容器参数, 回调参数 * 2015-11-17 v1.3 只对显示元素进行处理 */ (function($) { $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url", container: $(window), callback: $.noop };

每日技术总结:Better-scroll应用于弹出层内容滚动

一.Better-scroll在项目中的应用 Better-scroll这款滚动插件还是很好用的,通常不会有什么问题.但偶尔总会出点意外.今天再次使用better-scroll,记录一下这次顺利的过程,以防下次使用的时候出现意外. 1.需求 这是一个老项目,在商品详情页,点击购买按钮,会弹出一个协议,修改的需求是把协议弹层大小固定为一屏,协议的内容超出滚动. 效果如图: 2.下载better-scroll并引入项目 (1)因为这是一个传统开发的老项目,我想把插件下载下来引用.我上哪去下载bett

强大的CSS:scroll-snap滚动事件停止及元素位置检测

一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片广告效果就可以纯CSS实现. 而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用. 二.源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候,正好遇到一个场景非常适合使用Scroll Snap来实现,滑动依次显示人物角色.于是就大胆使用了下,哇,好棒,无需

前端开发入门到实战:CSS 页面滚动平滑

1. 这些年自己步子慢了 这些年自己在无障碍访问,SVG和Canvas这些偏小众的领域花了大量的学习精力,以至于很多前端新特性,新技术没能及时关注和了解,有CSS3领域的新属性,有JS领域的新API,包括全新的ES6/ES7语法等,相比以前的学习,步子确实慢了.比方说,本文要介绍的平滑滚动,无论是CSS还是JS,现代浏览器都提供了原生的属性或方法支持,而且差不多已经有一年时间,而我最近才知道,和数年前实时关注新技术的自己形成了明显的对比. 不过随着SVG和Canvas的基础越来越牢固,细节越来越