.

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

老赵发表于:2015年01月03日 20:44:28更新于:2023年06月30日 17:40:12


视频教程


一、案例效果

0015c9994763aca7a89d657a66b7dfd

案例模板

image.png


二、应用场景

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

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

《2018年度发展报告》

《来自星空的感动!》

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

《寻找玉兔》

《模拟群聊详细教程》

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


三、组件用法

  • 支持layer容器横向或竖向可滑动属性

  • 支持layer容器重力感应滑动(需使用https发布)

  • 支持横向或竖向长页面内容(可用于自动移动,非手势滑动的场景)

  • 支持自定义页面局部区域内可滑动属性

  • 支持横向和竖向滑动时滚动条的设置


基本用法

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

0015c32ffae614cab639c729a669f95


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

image.png

具体添加过程动图

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容器作为一个整体长图使用

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


4.Layer容器可显示滚动条,包含以下样式的设置(如下图所示):

  1. 可选择“无操作时隐藏”

  2. 支持设置滚动条的颜色

  3. 支持设置滚动条的透明度

image.png


四、相关Q&A:

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

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



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

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


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

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

怎样模拟微信朋友圈?

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

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

回复(5)