不知道后期Skyline会不会是微信小程序的主流或者重心 用官方提供给的组件写出来倒是蛮好看的 官方说性能对比也比较明显 最近有甲方提出想用小程序的多端开发做下其他平台的APP 之后可能会渐渐把之前WebView实现的界面优化成Skyline 今天记录下Skyline里的其中一个原生组件grid-view 其实实现出来的效果就是俗称的'瀑布流'列表 小🍠里的列表比较明显[截图里面的信息和本章没什么关系哈]

2列 左右的列表内容不对称 系统会按照内容首图和标题长度自行计算交叉的高度 很早之前做开发 在小程序里需要实现这个 印象里当时是需要获取左右列每个内容框的高度 然后还要在界面渲染时候做各种计算 来达到内容有交叉错开的感觉 现在就比较简单啦 老样子 先给一下官方文档的地址

https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html

贴一下在项目里实现的具体代码

<grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10" main-axis-gap="10"> <block wx:for="{{goodsArr}}" wx:key='index'> <view class="good-item-v"> <!--这个view里实现单个商品 或者需要展示的信息--> </view> </block></grid-view>

需要注意的是开发工具和公众平台那边的基础库设置 官方有提醒

按照上面的代码 把内容渲染出来 就可以看到瀑布流的效果了

列表的设置可以对照下方的截图 或者直接访问官方文档查询

项目里实现 正式版上线后 自己测试还是蛮顺滑的 几乎没什么卡顿 除非是数据请求那边有延迟 或者列表信息里的图片过大没有CDN加速之类的情况 会稍微有点慢 如果是图片加载的体验问题 可以试着上一下骨架屏 之前有提过的TDesign组件库里 控件不好看？试试TDesign 到官方文档里找也ok

https://tdesign.tencent.com/miniprogram/components/skeleton

引入之后 瀑布流加载的时候会有等待加载效果 体验上高大上一些 😃

最近手上有项目在赶进度 暂时没时间整理线上运营 营销 还有搞钱方面的信息 就先日更一些和代码有关的文章 晚些空了又写其他方面的

保持好奇 不断进步 下期见~