3.Layer容器:弹窗/上下左右滑动/长图滚动/滚动条 |
您所在的位置:网站首页 › 弹窗怎么做设计布局图 › 3.Layer容器:弹窗/上下左右滑动/长图滚动/滚动条 |
视频教程 一、案例效果 案例模板 二、应用场景 用于盛放一个或多个内容的容器组件,这个容器内可以放置文字、图片、图形等。但不建议放置音频、视频,因为不利于加载跟控制。 Layer可以拿来做部分区域的长页面滑动浏览,也可以用来模拟目录、模拟聊天界面、模拟镜头移动等。 《2018年度发展报告》 《来自星空的感动!》 《爱悦之城——寻找微笑的力量》 《寻找玉兔》 《模拟群聊详细教程》 《【海尔集团】足不出户带你看遍空净黑科技》 三、组件用法 支持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,然后拖动到合适的位置(图片的最下面) 怎样让一张横长图在屏幕内左右滑动? 上下可以滑动/拖动的长图片怎么做? 怎样模拟微信朋友圈? layer 里的元素怎样控制页面里的元素? |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |