评论

长列表需求的总结

vant 踩坑记录,项目反思

水逆 踩坑之 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 提这个问题。

点赞 1
收藏
评论
登录 后发表内容