| | | | --- | --- | | | | # 組件名：hsComList（列表組件帶分頁） ### 作者：屈磊 ### 效果： ](images/screenshot_1629969185517.png)  ## 使用方式： ``` import?hsComList?from'./list/hs-com-list.vue' ??<hsComList? :grid="grid"? :list="list" :pagination="pagination" @jumpClick="jumpClick" @handleCurrentChange="handleCurrentChange"/> ## 組接受參數： ?data()?{ return?{ pagination:{ currentPage:?1,?//?當前頁 pageTotal:?50,?//?總條數 pageSize:?12,?//?每頁顯示幾條 layout:?'prev,?pager,?next',?//?分頁器功能 }, list:?[{ id:1, poster:"http://via.placeholder.com/312x175", title:"標題", brief:"簡介", number:"流量", time:"時間", isPlay:true,是否顯示播放，默認不顯示 lineOmit:1,，最多3行 標題默認1行省略 ratio:"56%"?圖片比例，?默認?16：9 }] //?列表數據, grid:6,通過基礎的 24 分欄，迅速簡便地創建布局。默認 6 ? } } ?????????????????????????? ``` ### 說明： 組件帶有無數據圖 圖片按照比例設置 ratio:"56%"?圖片比例，?默認?16：9 等比縮放 ### 參數： | 參數 | 作用 | 類型 | 默認 | 是否必傳 | 屬性 | | --- | --- | --- | --- | --- | --- | |???list?|??列表數據?|??Array?|??|??是?|???| |???paginationShow?|??是否顯示分頁?|??Boolean?|??|??否?|???| |???pagination?|??設置分頁器?|??Object?|??|??否?|???| |???grid?|??柵格布局?|??Number?|??|??否?|???|