效果图
在这里插入图片描述

思路

其实说是折叠效果,关键是数据的处理,
1:第一行开头有全部,结束有更多。所以第一行显示的只有三条数据
2:每行显示固定的条数,五条
3:最后一行显示三条
4:布局第一行是展示的,下面是通过更多的折叠逻辑来实现的

代码实现

在这里插入图片描述
首先是截取数据的前三个,slice [0,3)
其次是截取后面所有的数据 slice [3, data.list.length)
最后是分组,五个一组

谈一个额外话题,要求是没有匹配到的数据,显示灰色,且不可点击状态
这还不好实现吗? 一个disabled就带走,但是我发现,我特么是用view标签写的,这家伙没有disabled属性啊,该样式的话,贼麻烦

这可愁死我了,我想自己实现一个disabled? 或者把view 都改成button,一天,整整一天!!!

最后 发现解铃换续集令人

你怎么就显示灰色,还不是数据的某个字段为false
那就弄一个if else 如果没有匹配到,我就显示灰色,匹配到我就正常展示。
至于不可点击,点击的时候,在里面传递匹配的字段。如果这个字段为false,那么直接return false。后面的就不执行了,这不也是禁止点击了吗!!!
在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐