cover_image

小程序中瀑布流布局太棘手?这款插件不仅貌美还「能屈能伸」

cloud小程序微信开发知晓云插件brickLayout瀑布流
知晓程序

<p><img class="aligncenter size-full wp-image-1085592" src="https://images.ifanr.cn/wp-content/uploads/2018/08/211.jpg" alt="" width="1200" height="675" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/211.jpg 1200w, https://images.ifanr.cn/wp-content/uploads/2018/08/211-360x203.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/211-768x432.jpg 768w, https://images.ifanr.cn/wp-content/uploads/2018/08/211-1024x576.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <p>上个月,未来实验室的产品经理提了一个需求,要做一个可以动态缩起和展开的还要有序的瀑布流。瀑布流? 动态? 还要有序?要如何在小程序里面实现有序的瀑布流还要「能屈能伸」 ?也就是说,我们将实现的效果是下图这样的。</p> <p><img class="aligncenter size-full wp-image-1085530" src="https://images.ifanr.cn/wp-content/uploads/2018/08/flex-layout.jpg" alt="" width="1000" height="1317" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/flex-layout.jpg 1000w, https://images.ifanr.cn/wp-content/uploads/2018/08/flex-layout-360x474.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/flex-layout-768x1011.jpg 768w, https://images.ifanr.cn/wp-content/uploads/2018/08/flex-layout-778x1024.jpg 778w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3>开发思路</h3> <p>因为小程序的诸多门槛,限制了小晓云的想象。隔壁知晓云的产品经理已经被打了,难道未来实验室的产品经理也想……?小晓云思来想去,首先想到了用纯粹的 CSS 来实现瀑布流组件。</p> <p>使用新的 grid(栅格)布局?似乎没办法达成 「能屈能伸」 的瀑布流效果,因为 grid 布局是将页面分割成若干个主要区域,比较适用于有规则的页面布局,在这里似乎没有用武之地。</p> <p>使用 flex(弹性盒子)布局?初始的效果似乎还行,但是展开缩放的时候,极端情况下会导致两列高度差过大。</p> <p>用 CSS3 的新特性 multi-column (多列)布局 ? 乍一看,效果似乎不错,完美的实现了瀑布流布局,展开缩放还能自己调整两列高度。但是细细观察之后,发现事情并不简单。由于 multi-column 的本质是将文档按照顺序分成多列,如同我们杂志、报刊那样子的多栏布局,所以实际上效果(如下图)会导致我们数据展示的顺序有问题。</p> <p><img class="aligncenter size-full wp-image-1085531" src="https://images.ifanr.cn/wp-content/uploads/2018/08/multi-column.jpg" alt="" width="1000" height="1317" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/multi-column.jpg 1000w, https://images.ifanr.cn/wp-content/uploads/2018/08/multi-column-360x474.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/multi-column-768x1011.jpg 768w, https://images.ifanr.cn/wp-content/uploads/2018/08/multi-column-778x1024.jpg 778w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>最后小晓云想了一个法子,通过采用 flex 布局外加上处理原数据的方式实现 「能屈能伸」 的有序瀑布流。BrickLayout 晓瀑布流就这样诞生了。前端通过纯粹的 CSS 的 flex 布局来实现展示,同时对使用者所传入的数据进行处理,进一步保证两列高度基本一致,从而避免出现极端的两列差距过大的情况。最终我们的瀑布流组件呈现效果如下。👇</p> <p><img class="aligncenter size-full wp-image-1086067" src="https://images.ifanr.cn/wp-content/uploads/2018/08/demo.gif" alt="" width="180" height="320" /></p> <p>BrickLayout 晓瀑布流为使用者提供开箱即用的瀑布流布局的一种可行性的方案,使用者仅需要按照对应所需的字段传入瀑布流组件,即可快速实现瀑布流布局。使用者可以自己定制卡片是否默认展开,卡片的背景颜色,点击卡片所触发的事件等。</p> <p><img class="aligncenter size-full wp-image-1086070" src="https://images.ifanr.cn/wp-content/uploads/2018/08/009.jpg" alt="" width="1000" height="1221" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/009.jpg 1000w, https://images.ifanr.cn/wp-content/uploads/2018/08/009-360x440.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/009-768x938.jpg 768w, https://images.ifanr.cn/wp-content/uploads/2018/08/009-839x1024.jpg 839w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>目前的 BrickLayout 晓瀑布流刚刚起步,暂时只提供一种模板主题。BrickLayout 晓瀑布流设计的初衷是希望能够使使用者拥有 「开箱即用」 的感觉,即是可以通过少量的配置就可以完成瀑布流布局。使用者无须在关心实际的瀑布流布局实现,也无需关心前端的实际样式布局,更加专注于业务逻辑开发。未来的 BrickLayout 晓瀑布流将为使用者提供更加多样的模板主题,适用于不同场景之下的瀑布流布局。</p> <p>如果你有更好的主题推荐,欢迎留言告诉我们。</p> <h3>BrickLayout 晓瀑布流插件使用方法</h3> <p>目前 BrickLayout 插件信息:</p> <p style="padding-left: 30px;"><strong>AppID</strong>:wx3c042630f3cdc175</p> <p style="padding-left: 30px;"><strong>版本号</strong>:0.1.1</p> <p>具体使用方法如下:</p> <p>1. 在微信小程序管理后台中,按 APPID(wx3c042630f3cdc175)或者按照名字 BrickLayout 晓瀑布流搜索到该插件,点击添加,即可在代码中使用 BrickLayout。</p> <p>2. 在 app.json 中声明该插件的引入,version 表示目前该插件版本为 0.1.1,provider为该插件的 AppID,而 BrickLayout 为自定义的插件名称。</p> <pre><code>"plugins": { "brickLayout": { "version": "0.1.1", "provider": "wx3c042630f3cdc175" } }</code></pre> <p>3. 在需要引用瀑布流组件的小程序页面的 JSON 配置文件中,作如下配置:</p> <pre><code>{ "usingComponents": { "brickLayout": "plugin://brickLayout/brickLayout" } }</code></pre> <p>4.在需要应用瀑布流组件的 WXML 里面直接使用即可。</p> <pre><code>&lt;brickLayout dataSet="{{dataSet}}" option="{{brick_option}}" bind:tapCard="tapCard" bind:tapLike="handleLike" bind:tapUser="handleUserEvent" bind:onCardExpanded="handleExpand" /&gt;  </code></pre> <p><img class="aligncenter size-full wp-image-1085561" src="https://images.ifanr.cn/wp-content/uploads/2018/08/db.jpg" alt="" width="1000" height="657" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/db.jpg 1000w, https://images.ifanr.cn/wp-content/uploads/2018/08/db-360x237.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/db-768x505.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p>