.

5.制作可上下滑动的长页面H5

Dre发表于:2016年01月11日 14:03:51更新于:2024年09月19日 18:01:00

有两种方法,分别是启用长页面和使用layer容器,我们依次来介绍一下:

(一)启用长页面

通过设置画布高度,来制作可以上下滑动的长页面效果,具体设置方法如下:

1. 如下图,在页面信息里,我们会看到“启用长页面”的选项,现在我们勾选上

0015c2c434a3fbb5c66bfb029e858f3


2. 勾上后,画布上会出现上图中灰色的条,这个条是可以拖动的

0015695ca668f9c3f10b586a5fa3bd9


3. 向下拖动后,画布会延长,此时画布上会留下一跳灰色的线条,这个线条就是正常画布的出血线,以方便观察长页面中一屏的位置。

0015695ca72d41f05271a95887011ee


4. 除了拖动外,还可以如上图一样,直接输入数值,像我们这个启示中,尺寸的话就按照设计图的尺寸直接输入就可以了。

0015c2c439c863bc9be143ee4bbb51e


5、长页面可以设置长页面禁止、允许滑动以及滑动速度(0-1)

image.png

(二)使用layer容器

页面不用做修改,使用layer,将多个元素放在一个容器里,做成一个长长的图,再把这个容器放在页面里,容器尺寸比内容短,就可以滑动。用默认的普通页面即可(370X568或者微信Plus画布)。【layer容器相关教程】


回复(3)