2024-03-13 创建于墨问
- 列表切换
发现页新增了一个「朋友在看」列表，为了方便左右滑动，使用了 swiper 来完成。
而点击顶部 tab 文字，则需要立即切换，不要滑动效果。
webview 模式将 swiper 的动画时间设置为 0，skyline 模式则将 scroll-with-animation 设置为 false，就能实现这个效果了。
- 下拉刷新
小程序 PC 版无法通过「下拉」的方式去刷新列表，单独放一个按钮又显得不自然，于是增加了点击 tab 去刷新的交互。
只要点击带小红线的 tab 就可以刷新，点击另一个灰色 tab 则是切换 tab。
需要刷新时，去设置 scroll-view 的 refresher-triggered 为 true 即可。
- 瀑布流
旧的版本，瀑布流固定是 2 列。预览图只有 240px 宽度，在电脑或大屏幕设备上，图片被拉宽后变得模糊，卡片也显得头重脚轻。间距只能 1:2:1，两边 10px，中间 20px。
优化后，瀑布流则是最少 2 列 ~ 最大任意数量，宽度则是不超过 240px。能够保证图片清晰，视野中也能看到更多卡片。间距自由，目前设为了 5px。
旧版本在 PC 端自行写算法进行布局。如果设置 4 列，在调整窗口宽度时，特别卡顿几乎不可用。
优化后，使用了小程序原生组件 grid-view 的 masonry 模式。原生组件可以自定对卡片进行宽度计算和布局，性能提高了很多。开发者只需要计算好图片的显示高度即可。
为什么不跳过图片计算，直接使用 image 的 widthFix 模式。原因是图片加载完成前，是不占用高度的，加载过程中，图片会从 0 增高，视觉效果会看到抖动，也会增加布局的计算，带来性能损耗。
具体如何计算呢？
设瀑布流展示 X 列，边距为 5，图片显示宽度 width，屏幕宽度为 windowWidth
则得到公式：
5 + width * X + 5 * (X - 1) + 5 = windowWidth
利用公式，先使用最大列宽 240px，计算出列数：
X = (windowWidth - 5) / (maxCrossAxisExtent + 5)
计算结果向上取整数，得到整数列数，注意最少 2 列：
X = Math.ceil(X)
X = Math.max(X, 2)
代入 X 的值，再次利用公式，就可以求出 width
通过服务端返回的图片真实宽高，进行换算，就可以得出图片的显示高度了。注意为了防止图片超过一屏幕，也需要限制下高度：
imageHeight * width / imageWidth
imageHeight = Math.min(imageHeight, windowHeight - navBarHeight - 220)
瀑布流兼容情况：
grid-view 需要小程序基础库 3.0.0，这个版本以下，则不使用瀑布流，使用卡片列表做好兜底即可。要兜底的用户比例，可以在小程序后台-设置-基本设置-版本设置-基础库最低可用版本里去查看对应版本的「受影响用户UV占比」。
