| | | | --- | --- | | | | # 组件名：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 |  |  否 |   |