vue 實現摺疊面板

效果圖
在這裏插入圖片描述

思路

其實說是摺疊效果,關鍵是數據的處理,
1:第一行開頭有全部,結束有更多。所以第一行顯示的只有三條數據
2:每行顯示固定的條數,五條
3:最後一行顯示三條
4:佈局第一行是展示的,下面是通過更多的摺疊邏輯來實現的

代碼實現

在這裏插入圖片描述
首先是截取數據的前三個,slice [0,3)
其次是截取後面所有的數據 slice [3, data.list.length)
最後是分組,五個一組

談一個額外話題,要求是沒有匹配到的數據,顯示灰色,且不可點擊狀態
這還不好實現嗎? 一個disabled就帶走,但是我發現,我特麼是用view標籤寫的,這傢伙沒有disabled屬性啊,該樣式的話,賊麻煩

這可愁死我了,我想自己實現一個disabled? 或者把view 都改成button,一天,整整一天!!!

最後 發現解鈴換續集令人

你怎麼就顯示灰色,還不是數據的某個字段爲false
那就弄一個if else 如果沒有匹配到,我就顯示灰色,匹配到我就正常展示。
至於不可點擊,點擊的時候,在裏面傳遞匹配的字段。如果這個字段爲false,那麼直接return false。後面的就不執行了,這不也是禁止點擊了嗎!!!
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章