水逆 踩坑之 vant

我原来是不信水逆的，但是近两周好好地教育了我

最近开始使用 ui 框架快速开发小程序。为了加快开发，对着原型图做了demo。

粗心大意

原由

从新拉的一个的demo，老项目部分页面使用到了vant ui，那demo也 install 一个vant。还用到的小程序的扩展组件 recycle-view。demo 好简单的，感觉好舒服。

过程

移植到老项目的进行开发的时候，vant 有些组件不一样了，还会报错。vant-weapp 重命名为 @vant/weapp。
我承认我没有关注 vant ，也没有看它的更新日志。

所以说，我14号做的demo，其实用的是11号的更新版。疯掉了。。

结果

不能直接升级是因为使用某些vant组件改了它的代码，至于哪些。。。项目久远，没有文档，无从找起。于是挨个找用到的组件，查看页面。好在只有几个页面用到了，最后修改升级提交。700多个改动。

追求完美

原由

之前老项目的优化一直感觉可以在优化，在优化。。所以新功能基本就是tabs + 常列表。那用小程序扩展组件 recycle-view 吧，写了个demo，感觉会用了。完美

过程

demo 只是做了两个list，没有涉及 append update等操作。项目中要展示20+个tabs，那一个一个维护需要20+个list（这个当时没考虑到），recycle-view NB，我用它用该可以，这一顿操作就是两天半，其他功能没有什么难点，就是想优化长列表，跟它磕，两天半没结果。。。 append update 等等操作不触发更新demo。

现在想来recycle-view不是用的setdata，所以我append数据页面没有更新，但是它不推荐setdata，优化性能就优化在这里。

recycle-item 的介绍如下：
需要注意的是，recycle-item 中必须定义 wx:for 列表循环，不应该通过 setData 来设置 wx:for 绑定的变量，而是通过createRecycleContext方法创建RecycleContext对象来管理数据，createRecycleContext在 index.js 文件里面定义。建议同时设置 wx:key，以提升列表的渲染性能。

画重点

recycle-item 中必须定义 wx:for 列表循环，不应该通过 setData

是通过createRecycleContext方法创建RecycleContext对象来管理数据

上拉加载的时候，数据进去了，没有走 setData 页面没有渲染，recycle-item 生效了，高度位置有的，没有内容。。。。

结果

做项目的时候还是要优选选用自己熟悉的技术，放弃recycle-item 后，用之前的写法半个小时结束长列表。

如果要优化也应该在项目上线后，用户体量激增的同时优化代码。像这次直接用 recycle 花费了好多时间，如果不是后面的需求做过，这次要耽误上线时间了。

vant 的坑

是的，我用了 vant 的内置样式，项目的 app.css 已有的功能，鬼知道我怎么突然想用它的内置样式了。

<!-- 最多显示两行 -->
<view class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，后面的内容会省略</view>

多么朴实无华的一个class啊，看效果 👇

懵 20多个列表，这个兄弟是怎么了。。。

甩锅第一式，微信的锅。甩锅第二式，编辑器的锅。甩锅第三式，手机的锅。

全部招式用完发现这兄弟确确实实是我的布局问题导致的。

挨着排查样式，一个一个节点看。md 想不通

最后仙女告诉我了。。是不是数字字符断行？ 还真是，20多个数据，只有这个是数字结尾。

哦～，汉字会自动断行，数字和字母不会。为什么之前没有这种情况呢？ 哦～ 因为我这次用了 vant 内置样式的两行隐藏。。。看看它的css

还真的没有处理啊啊啊啊啊啊。

结果

很简单，css 添加一个 word-break 指定怎样在单词内断行。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

normal
使用默认的断行规则。
break-all
对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。 Non-CJK 文本表现同 normal。

总结

又犯了老毛病，在记一下。项目要快，在正式项目种选插件之类一定是要熟悉的，文档文档文档，注释注释注释。多记录多记录多记录，已经被自己气懵了，，语无伦次，我先去 vant github 提这个问题。