vue 实现折叠面板
效果图思路其实说是折叠效果,关键是数据的处理,1:第一行开头有全部,结束有更多。所以第一行显示的只有三条数据2:每行显示固定的条数,五条3:最后一行显示三条4:布局第一行是展示的,下面是通过更多的折叠逻辑来实现的代码实现首先是截取数据的前三个,slice [0,3)其次是截取后面所有的数据 slice [3, data.list.length)最后是分组,五个一组谈一个额外话题,要求是没有匹配到的
·
效果图
思路
其实说是折叠效果,关键是数据的处理,
1:第一行开头有全部,结束有更多。所以第一行显示的只有三条数据
2:每行显示固定的条数,五条
3:最后一行显示三条
4:布局第一行是展示的,下面是通过更多的折叠逻辑来实现的
代码实现
首先是截取数据的前三个,slice [0,3)
其次是截取后面所有的数据 slice [3, data.list.length)
最后是分组,五个一组
谈一个额外话题,要求是没有匹配到的数据,显示灰色,且不可点击状态
这还不好实现吗? 一个disabled就带走,但是我发现,我特么是用view标签写的,这家伙没有disabled属性啊,该样式的话,贼麻烦
这可愁死我了,我想自己实现一个disabled? 或者把view 都改成button,一天,整整一天!!!
最后 发现解铃换续集令人
你怎么就显示灰色,还不是数据的某个字段为false
那就弄一个if else 如果没有匹配到,我就显示灰色,匹配到我就正常展示。
至于不可点击,点击的时候,在里面传递匹配的字段。如果这个字段为false,那么直接return false。后面的就不执行了,这不也是禁止点击了吗!!!
更多推荐
已为社区贡献13条内容
所有评论(0)