视频教程
一、案例效果
二、应用场景
用于盛放一个或多个内容的容器组件,这个容器内可以放置文字、图片、图形等。但不建议放置音频、视频,因为不利于加载跟控制。
Layer可以拿来做部分区域的长页面滑动浏览,也可以用来模拟目录、模拟聊天界面、模拟镜头移动等。
三、组件用法
支持layer容器横向或竖向可滑动属性
支持layer容器重力感应滑动(需使用https发布)
支持横向或竖向长页面内容(可用于自动移动,非手势滑动的场景)
支持自定义页面局部区域内可滑动属性
支持横向和竖向滑动时滚动条的设置
基本用法
1.添加layer容器之前,必须先切换到layer页面,编辑layer容器内的内容。
2.切换回页面中,找到高级组件中的layer容器,单击添加到页面。
具体添加过程动图
3.添加到页面中后,要把layer 容器的尺寸,比如高度调整到比layer页面短,可以实现上下滑动的效果。
layer页面里的布局:
添加到页面中的调整效果
4.思路延伸
如果想要实现左右滑动,就需要把layer 容器的宽度调整到比layer页面窄(动图加载时间较长,请耐心等待)。
layer页面里的布局:
添加到页面中的调整效果
5.添加Layer容器到页面后,可以【双击layer容器】进行拖动,决定初始显示画面。
思考:
1、如何实现Layer容器上下滑动?
2、如何实现Layer容器左右滑动?
高级用法
1.layer容器支持重力感应
2.layer容器子元素触发器。点击layer内的元素触发一些行为。
3.Layer容器作为一个整体长图使用
详细见教程《设置元素属性——横、竖长图的自动滚动(技术贴)》
4.Layer容器可显示滚动条,包含以下样式的设置(如下图所示):
可选择“无操作时隐藏”
支持设置滚动条的颜色
支持设置滚动条的透明度
四、相关Q&A:
Q:为什么我已经设置了Layer大于Layer容器的尺寸还是无法滑动?
A:请确认是否在添加了页面触发器,如若添加建议删掉试试。
Q:我想让layer在页面中最开始显示的是最下面的画面(即由下往上滑动),该如何调整?
A:在页面中双击layer,然后拖动到合适的位置(图片的最下面)
回复(5)