- 小程序中瀑布流布局太棘手?这款插件不仅貌美还「能屈能伸」
BrickLayout 晓瀑布流是知晓云为小程序开发者提供的第 3 款插件 BrickLayout 晓瀑布流为使用者提供开箱即用的瀑布流布局的一种可行性的方案,使用者仅需要按照对应所需的字段传入瀑布流组件,即可快速实现瀑布流布局。未来的瀑布流组件将会提供更多样式、适用更多场景的瀑布流模板,敬请期待!希望有更多场景推荐,希望有更多内容定制,欢迎留言或者告诉我们 g-emoji class="g-emoji" alias="clap" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f44f.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.4em; line-height: 20px; vertical-align: middle;">👏/g-emoji> How BrickLayout g-emoji class="g-emoji" alias="sparkles" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.4em; font-weight: 400; line-height: 20px; vertical-align: middle;">✨/g-emoji>由于小程序的诸多限制,导致在 web 上很多常规实现瀑布流的方式大多受到不同程度的影响,小程序中,实现瀑布流组件大抵有两种思路:采用纯粹的 css 来实现,或者通过数据处理配合 css 来实现瀑布流。 采用纯粹的 css 采用纯粹的 css 可以用 multi-column 利用 css3 属性实现多列布局、flex 布局、grid 布局等等。但是结合每个布局的特性,我们率先排除了 grid 布局,因为 grid 布局是实现相对有规则的网格布局,瀑布流布局中,grid 布局不适用。其次,我们排除了 multi-column 这个 css3 属性。在呈现效果上看,multi-column 的确很好地满足了我们对于瀑布流布局的样式布局要求,但是,multi-column 本质上是将文档流分为多列,也就是我们在杂志、报刊常见的多列布局,最后呈现效果(如下图)实际上不满足我们对有序数据的展现要求,因此而排除。 最后我们的考虑范围只剩下 flex 布局,flex 布局在初始状态下的确很好地满足了我们对于数据的呈现效果,但是如果不加以数据干预,在默认非展开的情况下展开单个卡片,极端情况下会导致两列高度差过大,破坏了我们对于瀑布流的要求。 css 配合数据处理 综上所述,我们采用了 flex 布局加之对于使用者所传入的数据进行处理,达成了我们想要的效果。前端展现方面,我们还是通过 flex 布局,达成实际的瀑布流呈现效果,对于数据变化亦或是卡片展开时,我们再对数据进行进一步的处理,只有在初始化的时候,或者卡片状态发生改变的时候,对两列高度进行计算,保证两列保持较为稳定的高度差,进而实现瀑布流布局。 why BrickLayout g-emoji class="g-emoji" alias="sparkles" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.4em; font-weight: 400; line-height: 20px; vertical-align: middle;">✨/g-emoji>通过 BrickLayout 晓瀑布流使用者无须在关心实际的瀑布流布局实现,也无需关心前端的实际样式布局,更加专注于业务逻辑开发。未来的 BrickLayout 晓瀑布流将为使用者提供更加多样的模板,适用于不同场景之下的瀑布流布局。 [代码][代码] 插件使用案例 [图片]
2018-09-27 - 小官网展示插件
小官网展示插件,是一个用户自定义内容展示插件。目前支持自定义展示栏目、内容、营销插件等。 目前已有的栏目类型有:官网首页、单页图文、新闻资讯、产品展示、在线商城、服务预约。 目前已有的内容类型有:文本、标题、图片、视频、地图、导航。栏目等。并且每个类型可以自定义展示布局样式。 目前已有的营销插件有:优惠券、快捷买单、购物车、拼团等。 下面展示部分插件内容: [图片] [图片] [图片] [图片]
2018-09-21