微信推文无缝滚动是这样炼成的

效果展示



前段时间，我收到公司策划妹子的请求，需要在微信公众号里面做一篇推文。这个推文和以往不同，需要有两张图片无缝拼接，并且下方图片可以滚动的效果。这个效果目前用微信自带的编辑器是无法实现的，毕竟功能有限，而这个需求也相对要小众一些。不过这个效果是很不错的，在微信推文中浏览会让人耳目一新。





从上图可以看出，首先是一张海报，乍一看没什么，以为就是一张图片。当你用手指滑动屏幕看下面内容时，你会惊奇的发现海报下半部分的内容时是可以滚动的，而且滚动到最底部后海报又回到了最初的状态。是不是很神奇？下面小编我将带你一探究竟！



技术实现原理



之前我们技术部做过一个端午节的推文，和这个类似，只不过那个是上面滚动下面固定，而这个是反过来了。端午节的推文案例效果如下：





我仔细看了下源码，发现原理是类似的。这个技术的关键有两点，一是上下两张图要无缝衔接，而且宽度要相同。二是图片固定区域滚动，下面的长图不能一开始全部显示出来，而是先显示开头的一部分，这一部分的高度是固定的。下面的内容初始隐藏，只有通过滚动才会出现下面的内容。滚动到最下方的时候，会发现海报合上了，这里其实是一个障眼法，下方图片的底部正好是和顶部一样的图（只有文字提示不一样），这里对设计有特殊要求，第二种长图的顶部和底部的内容是要保持高度一致的，为了实现这个效果，好的设计是必不可少的。理解了这两个技术点，制作起来就有思路，实现起来就会容易许多。



无缝衔接的实现



无缝衔接的核心技巧在于，使用HTML的section标签包裹img标签。要想让图片居中，则需要给section设置左右的margin为auto，宽度为要显示的图片宽度。在本案例中我设置的宽度是311.5px，这样即便是在大屏手机上，也能让图片主题能够尽可能占用更大的区域，视觉效果更佳。需要注意的是，图片的src路径需要提前在微信后台编辑器中上传图片，上传成功后点击图片取消勾选后，再右键复制图片链接，粘贴到src位置即可。下面是两张图片无缝衔接的代码示例：



<section style="width: {{图片宽度}};margin-right: auto;margin-left: auto;">
    <img class="" src="{{图片路径1}}" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;"
        data-type="jpeg" data-ratio="1.8925925925925926" data-w="1080"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
</section>
<section style="width: {{图片宽度}};margin-right: auto;margin-left: auto;">
    <img class="" src="{{图片路径2}}" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;"
        data-type="jpeg" data-ratio="1.8925925925925926" data-w="1080"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
</section>



然而实际效果可能会和我们预想的有所出入，往往会出现两张图片依旧存在白边缝隙的问题，这时候只需要在section标签上加上margin-top:-1px即可。如果还是有白边，继续手动调节，负值越小，两张图片的上下间距也就越小。



固定区域图片滚动的实现



这里使用的是一个固定的外层盒子，设置overflow-y:auto，同时设置height: 196px;，这样既能保证可视区域固定，也能使得这个区域可以进行滚动操作。注意这里的height需要手动调节，多次在微信编辑器保存发送到手机预览，不断的尝试获得最合适的高度值。浏览器的效果和手机实测会有些许出入，需要耐心慢慢调节。



<section style="margin-top: 0px;">
    <section style="width: 311.5px;margin-right: auto;margin-left: auto;">
        <section style="background-image: url({{图片路径1}});background-size: 100% 100%;">
            <img class="" data-ratio="1.43671875" src="{{图片路径1}}"
                data-type="jpeg" data-w="1280" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;opacity: 0;"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</section>
        <section style="border-width: 0px;border-style: none;overflow-y: auto;height: 196px;font-size: 0px;vertical-align: bottom;box-sizing: border-box;margin-top: 0px;">
            <section style="height: 1086.78px;">
                <img class="" data-ratio="3.025" src="{{图片路径2}}"
                    data-type="jpeg" data-w="1280" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;opacity: 1;"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</section>
        </section>
    </section>
</section>



上面的代码中，图片路径1表示的是上面固定大小海报，图片路径2是可以滚动的长图。



在这个环节我遇到了一个坑，那就是下面长图按照同事之前给的背景图片加图片透明的方案会使得iPhone手机可视区域高度变小，导致图片显示的内容不完整，而安卓手机是正常的。这个bug和微信iOS版的页面渲染机制有关，刚发现的时候让人摸不着头脑。为了修复这个bug，我后面采用了设置section标签定高的方法，也就是和实际图片显示高度一致，精确到小数点后两位，这样无论是什么系统的手机都能完美显示了！



section背景图+img透明的方案虽然有bug，不过有个好处，就是你不用设置section的高度了，同时你可以在审查元素中可以看到section被撑开的高度，以便于获取到合适的section高度采用后面的改进方案。因此我在固定海报的图片上用的还是之前的方案，只是滚动图片不适用而已。



最后一步



看到这里你也许会问，代码我都按照你说的写好了，可是怎么放到微信文章里面去呢？答案其实很简单，这里用到了浏览器hack的小技巧。你在微信编辑器的网页随便输入点内容，然后鼠标右键选择审查元素，审查文本框的内容，把里面的标签全部替换为你写好的代码就可以了！



总结



这个推文做下来最费时间的其实是微调，需要不断保存在手机上调试，而且不同的手机显示可能会不一样。我在制作的过程中做了一些艰难的取舍，比方说iPhone5s上显示效果会比较差，滚动的区域和上方海报有缝隙，这是因为我的宽度设置的是311.5px，而iPhone5s的设备宽度只有320px，而且微信默认会给文章主体内容加左右内边距，这样就导致实际显示宽度会小于311.5px，那么原来的可视高度就显得不合适了。如果把宽度设置为100%，这样显示的宽度是最合适的，然而图片是有宽高比的，宽度可以自适应，而可视区域的高度必须是固定的像素值，这样也不合适。最终我选择的方案是给一个合适的固定宽度，高度根据宽度一点点手动调出来。这样一来只要是目前主流的大屏手机，显示的宽高都是固定的，效果也是一样的。只是宽屏手机左右的白边会多一些，宽度不能占满也是一个缺憾。



掌握了技术原理，实现起来并不十分困难，只是需要在兼容性和效果上做一些平衡，以及需要花费耐心做微调。看完这篇文章，相信你也能够轻松的做出这个推文效果。