我把一篇文章装进“手机屏”滑滑滑动着看

oppledr

图文排版
H5秀
手机图文
小伙伴
秀小米，我想知道手机屏内可以滑动的长图效果是怎么做出来的呀，可以讲一讲吗？
手机壳做长图滑动效果，其实就是将内容放在一个仿手机屏的上下滑动布局里，而长图效果则是把图文生成长图，再去剪切成合适的大小，塞到互动布局里即可。
秀小米
在一个手机屏内中做出长图滑动效果，将这句话提炼出关键词，就是手机屏、长图、滑动，所以我们需要准备以下素材：
手机屏的“外壳”
大小合适的长图
让内容滑动起来的上下滑动布局
手机屏外壳是如何做出来的
手机屏外壳，是我们模板设计师自己设计出来的，我们一共提供了五种不同颜色的手机屏外壳样式，大家搜索“手机”就可以获取到：
手机屏外壳是由手机顶部、中间的手机边框、手机底部三部分组成，分为三张图片，中间的手机边框图是被设置成了上下滑动布局的背景图：
模板中的内容可以进行替换，我们可以往里面塞入各种内容，纯文字、图片以及模板都可以放进去，不过需要注意上下滑动布局的宽高度具体设置。
如何在手机屏内放入长图文
因为手机滑动本身效果的限制，如果把整篇文章直接放入滑动布局中，实际预览时可能会与预期效果不一致；不过我们可以将图文生成图片，保证图片宽度一致：
如何把文章生成长图
在图文制作完成并保存好后，点击顶部菜单的倒三角，在弹出的页面中点击生成长图：
点击它后，可以选择生成长图的质量，可选择标清、高清、超清三种；其中标清长图宽度400，高清长图宽度800，超清长图宽度1600，高清与超清长图需要秀米VIP：
生成的长图，我们可以在本地看到它的宽高度信息，而根据秀米使用规则，秀米上传的图片宽或高度不能超过4000px，超过这个数值的长图需要先在本地处理成合适大小：
将长图片放到手机滑动模板中
将图片处理完成后，上传到秀米图库中，可以将手机滑动模板原有内容删后，拖动图片放入滑动布局里：
把图片放入滑动模板中，要保证图片是上下无缝连接的，这样可以看出来是一个整体；图片无缝连接即图片的段前距、段后距为0，可以在定位设置里手动调整：
接着我们继续往里面塞入内容，可以先将内容码好，设置图片段前/后距为0，多选放入剪贴板，再拖入滑动布局中：
把内容全部放入手机滑动模板中，还可以根据内容显示效果，来调整下滑动布局的宽高度设置：
小结
要想在手机屏内做出长图滑动效果，除了必要的手机滑动模板，还需要将一篇文章先生成长图，在本地中将图文裁剪成宽高度不超过4000px的图片，再把图片拖进滑动布局中，需注意图片要无缝连接。
你觉得本期教程如何
如果对滑动布局还有不了解的地方
或是有想学的其他的小技巧
可以留言告诉我们哦
秀米公众号栏目
模板
精选
急诊
更新
支招