.

3.Layer容器:弹窗/上下左右滑动/长图滚动

老赵发表于:2015年01月03日 20:44:28更新于:2021年10月22日 11:48:30

视频教程


一、案例效果

0015c9994763aca7a89d657a66b7dfd

案例模板

image.png


二、应用场景

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

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

《2018年度发展报告》

《来自星空的感动!》

《爱悦之城——寻找微笑的力量》

《寻找玉兔》

《模拟群聊详细教程》

《【海尔集团】足不出户带你看遍空净黑科技》


三、组件用法

基本用法

1.添加layer容器之前,必须先切换到layer页面,编辑layer容器内的内容。

0015c32ffae614cab639c729a669f95


2.找到高级组件中的layer容器,单击添加到页面。

0015c32fec7f3fbad1be2a16a640895

具体添加过程动图

00156790283e05d51fb0bb69609e518


3.添加到页面中后,要把layer 容器的尺寸,比如高度调整到比layer页面短,可以实现上下滑动的效果。

layer页面里的布局:

0015c99e2f03ae76ad1902a795d78da

添加到页面中的调整效果

0015c99cfd3d3b34f35caae7f45785a


4.思路延伸

如果想要实现左右滑动,就需要把layer 容器的宽度调整到比layer页面窄(动图加载时间较长,请耐心等待)。

layer页面里的布局:

0015c99e15492fab04bec4712af5efb

添加到页面中的调整效果

0015c99d0fc2f6645d0d35bad083c42


5.添加Layer容器到页面后,可以【双击layer容器】进行拖动,决定初始显示画面。

0015c99d19831ec4343042bd372a631


思考:

1、如何实现Layer容器上下滑动?

2、如何实现Layer容器左右滑动?


高级用法

1.layer容器支持重力感应

0015c99dc442dab368dbf376689a417


2.layer容器子元素触发器。点击layer内的元素触发一些行为。

0015c99dd5a23fa20c140fd38163501


3.Layer容器作为一个整体长图使用

详细见教程《设置元素属性——横、竖长图的自动滚动(技术贴)》


四、相关Q&A:

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

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



Q:我想让layer在页面中最开始显示的是最下面的画面(即由下往上滑动),该如何调整?

A:在页面中双击layer,然后拖动到合适的位置(图片的最下面)


怎样让一张横长图在屏幕内左右滑动?

上下可以滑动/拖动的长图片怎么做?

怎样模拟微信朋友圈?

layer 里的元素怎样控制页面里的元素?

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

回复(5)