3.Layer容器

老赵发表于:2015年01月03日 20:44:28更新于:2019年01月07日 15:32:02

视频教程


  • Layer容器简介

用于盛放一个或多个内容的容器组件,这个容器内可以放置文字、图片、图形等。但不建议放置音频、视频,因为不利于加载跟控制。

Layer页面内的元素可以互相触发控制,也可以控制Masterpage(后面简称M页)和Background(后面简称B页) 的元素,但本身和页面的逻辑割裂,页面、M页、B页的元素不能控制layer页内的元素。

Layer可以拿来做部分区域的长页面滑动浏览,也可以用来模拟目录、模拟聊天界面、模拟镜头移动等。

blob.png 0015c32fd1d8069efa758b97e0cbd8a


  • Layer容器添加

找到layer容器单击添加到页面,但添加layer容器之前,必须先编辑容器内的内容,具体下一条。

0015c32fec7f3fbad1be2a16a640895

  • 编辑Layer内容

必须在layer页面添加,每个Layer页面可各自定义尺寸。

0015c32ffae614cab639c729a669f95

  • 具体添加过程动图

00156790283e05d51fb0bb69609e518


  • 案例参考

模拟群聊·附案例教程

image.png

  • 常见问题

问题1:竖屏状态下(Layer画布高>宽),可以上下滑,为什么有个别元素的左右部分看不见?

答:Layer容器组件刚添加到page页面时,宽度默认跟Layer画布一样,再加上Layer元素范围尺寸大于Layer画布尺寸,只要把Layer容器宽度调小一些,或者切换到Layer把Layer画布宽度调大一些, Layer画布外的左右元素就可以看见。补充:同理上下元素有些部分看不见的时候,调整layer画布高度就可以了。

问题2:如果我觉得Layer容器在page页面中显示太小了,但是Layer容器尺寸调太大了会造成Layer内容的不滑动等问题,怎么办?

答:那先把Layer画布调大,再去调整Layer容器尺寸。


练习题:

练习如何实现Layer内容在Layer容器内的上下滑动。

练习如何实现Layer内容在Layer容器内的左右滑动。

有几个需要注意的点再提一下:

Layer的画布尺寸需要调整,一般不能用默认的;起码要比Layer容器的长才可以滑动浏览

Layer的画布和Layer容器都是可以调整大小的!

如果希望通过手势滑动到底能触发翻页,则Layer容器的宽度必须要与Layer画布相等!

若需要制作滑动横长图,则将上述的文字中的“长”替换成“宽”。

添加Layer到Layer容器后可以双击进行拖动,决定初始显示区域。


Layer容器支持重力感应。

Layer页面内的元素只能由layer页内的元素进行触发控制。

如果有多个Layer页面的联动,前面的Layer要比后面的Layer长(或宽)才可以触发滑动到底的翻页。

Q&A:

Q:为什么layer放在页面中不能滑动
A:Layer添加在画布后,一般需要调整其尺寸,layer在页面中的尺寸起码要比Layer容器本身短才可以滑动浏

Q:为什么我已经设置了Layer大于Layer容器的尺寸还是无法滑动?

A:请确认是否在添加了页面触发器,如若添加建议删掉试试。

Q:我想让layer在页面中最开始显示的是最下面的画面(即由下往上滑动),该如何调整?
A:在页面中双击layer,然后拖动到合适的位置(图片的最下面)


早期视频教程

--------- 不了解设计的程序员不是好客服 ---------------

回复(5)