spz-list 列表

通用列表。

布局

何时使用

需要展示大量数据的列表时。
需要使用瀑布流布局来展示列表时。
需要分页/滚动加载/点击加载来展示列表时。

代码演示

基本用法

基本用法，结合 spz-pagination 一起使用。

<spz-list
  manual
  layout="container"
  size="per_page"
  page-size="8"
  list="data.products"
  initial-page="0"
  total="data.count"
  inherit-url-search="filter,sort_by"
  initial-total="32"
  id="collection-list"
  src="pathname?page=0&per_page=8"
  @dom-update="..."
>
  <template>
    <!-- ... -->
  </template>
</spz-list>

<spz-pagination list-id="collection-list" layout="container" num-display-active='1'></spz-pagination>

从自定义脚本中获取数据

使用 spz-script 生成自定义数据格式来展示列表。

function getListData() { return Promise.resolve({ count: 2, list: [ { "id": "c222663d-88ab-46bd-a21a-9584691aa744", "title": "Single Variant Haldon Cashmere", "price": "358", "image": { "src": "//cdn.shoplazza.com/adbfe4841b8b893cf18b34de55529a40.jpeg", "path": "adbfe4841b8b893cf18b34de55529a40.jpeg", "width": 1280, "height": 1710, "alt": "", "aspect_ratio": 0.7485380116959064 } }, { "id": "08dac6b7-21e1-4d9e-a887-9f6b6a0ab940", "title": "Anna Skirt", "price": "295", "image": { "src": "//cdn.shoplazza.com/7dff50a1a6895f9d8a89eeded2cee2a3.jpeg", "path": "7dff50a1a6895f9d8a89eeded2cee2a3.jpeg", "width": 1280, "height": 1710, "alt": "", "aspect_ratio": 0.7485380116959064 } }, { "id": "0d0d5247-0608-4e5c-bcfc-26e776997661", "title": "Dirdre Tank Dress", "price": "450", "image": { "src": "//cdn.shoplazza.com/c32547499e2fbe278580ed1847e66596.jpeg", "path": "c32547499e2fbe278580ed1847e66596.jpeg", "width": 1280, "height": 1710, "alt": "", "aspect_ratio": 0.7485380116959064 } }, { "id": "0f0eaab1-afaa-4bf2-b1d9-993f10c2c63e", "title": "Lace-up Leather Manston Runner", "price": "325", "image": { "src": "//cdn.shoplazza.com/5afeee913a4f8ff183295949f8e9d129.jpeg", "path": "5afeee913a4f8ff183295949f8e9d129.jpeg", "width": 1280, "height": 1710, "alt": "", "aspect_ratio": 0.7485380116959064 } } ] }); } exportFunction('getListData', getListData);

<spz-list
  layout="container"
  type="row"
  list="list"
  total="count"
  initial-page="1"
  src="spz-script:custom-script-data.getListData"
>
  <template>
    <div class="product-snippet">
      <spz-img layout="responsive" width="${data.image.width}" height="${data.image.height}" src="${data.image.src}" alt="${data.title}"></spz-img>
      <div class="product-snippet-info">
        <h3>${data.title}</h3>
        <spz-currency layout="container" value="${data.price}"></spz-currency>
      </div>
    </div>
  </template>
</spz-list>

<spz-script layout="logic" id="custom-script-data">
  function getListData() {
    return Promise.resolve({
      count: 2,
      list: [
        {
          "id": "c222663d-88ab-46bd-a21a-9584691aa744",
          "title": "Single Variant Haldon Cashmere",
          "price": "358",
          "image": {
            "src": "//cdn.shoplazza.com/adbfe4841b8b893cf18b34de55529a40.jpeg",
            "path": "adbfe4841b8b893cf18b34de55529a40.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        },
        {
          "id": "08dac6b7-21e1-4d9e-a887-9f6b6a0ab940",
          "title": "Anna Skirt",
          "price": "295",
          "image": {
            "src": "//cdn.shoplazza.com/7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
            "path": "7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        },
        {
          "id": "0d0d5247-0608-4e5c-bcfc-26e776997661",
          "title": "Dirdre Tank Dress",
          "price": "450",
          "image": {
            "src": "//cdn.shoplazza.com/c32547499e2fbe278580ed1847e66596.jpeg",
            "path": "c32547499e2fbe278580ed1847e66596.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        },
        {
          "id": "0f0eaab1-afaa-4bf2-b1d9-993f10c2c63e",
          "title": "Lace-up Leather Manston Runner",
          "price": "325",
          "image": {
            "src": "//cdn.shoplazza.com/5afeee913a4f8ff183295949f8e9d129.jpeg",
            "path": "5afeee913a4f8ff183295949f8e9d129.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        }
      ]
    });
  }

  exportFunction('getListData', getListData);
</spz-script>

瀑布流布局

使用 type="grid" 配合 column-count 来展示多列瀑布流。

<spz-list
  layout="container"
  type="grid"
  column-count="2"
  list="list"
  total="count"
  initial-page="1"
  src="spz-script:custom-script-data.getListData"
>
  <template>
    <div class="product-snippet-container">
      <div class="product-snippet">
        <spz-img layout="responsive" width="${data.image.width}" height="${data.image.height}" src="${data.image.src}" alt="${data.title}"></spz-img>
        <div class="product-snippet-info">
          <h3>${data.title}</h3>
          <spz-currency layout="container" value="${data.price}"></spz-currency>
        </div>
      </div>
    </div>
  </template>
</spz-list>

<spz-script layout="logic" id="custom-script-data">
  function getListData() {
    return Promise.resolve({
      count: 2,
      list: [
        {
          "id": "c222663d-88ab-46bd-a21a-9584691aa744",
          "title": "Single Variant Haldon Cashmere",
          "price": "358",
          "image": {
            "src": "//cdn.shoplazza.com/adbfe4841b8b893cf18b34de55529a40.jpeg",
            "path": "adbfe4841b8b893cf18b34de55529a40.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        },
        {
          "id": "08dac6b7-21e1-4d9e-a887-9f6b6a0ab940",
          "title": "Anna Skirt",
          "price": "295",
          "image": {
            "src": "//cdn.shoplazza.com/7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
            "path": "7dff50a1a6895f9d8a89eeded2cee2a3.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        },
        {
          "id": "0d0d5247-0608-4e5c-bcfc-26e776997661",
          "title": "Dirdre Tank Dress",
          "price": "450",
          "image": {
            "src": "//cdn.shoplazza.com/c32547499e2fbe278580ed1847e66596.jpeg",
            "path": "c32547499e2fbe278580ed1847e66596.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        },
        {
          "id": "0f0eaab1-afaa-4bf2-b1d9-993f10c2c63e",
          "title": "Lace-up Leather Manston Runner",
          "price": "325",
          "image": {
            "src": "//cdn.shoplazza.com/5afeee913a4f8ff183295949f8e9d129.jpeg",
            "path": "5afeee913a4f8ff183295949f8e9d129.jpeg",
            "width": 1280,
            "height": 1710,
            "alt": "",
            "aspect_ratio": 0.7485380116959064
          }
        }
      ]
    });
  }

  exportFunction('getListData', getListData);
</spz-script>

属性

属性名	说明	类型	默认值	是否必需
src	获取数据的路径	string	-	是
manual	如果该属性存在，组件挂载时不立即渲染（或不立即请求数据）	-	-	-
type	布局类型，可选：`row` \| `column` \| `grid` \| `masonry`	string	-	否
column-count	列数，只有在 `type="grid"` 时才生效	number	-	当`type="grid"`时必需
list	从返回的数据获取列表数据的路径	string	`data.list`	否
total	从返回的数据获取列表总数的路径	string	`total`	否
size	从接口请求的src中表示限制每页数量的字段名	string	`limit`	否
page	从接口请求的src中表示第几页的字段名	string	`page`	否
page-size	从接口请求的src中表示每页数量的值	number	`1000`	否
initial-page	接口请求的页数从第几页开始，可选值为：`0` 和 `1`	number	-	是
initial-total	列表总条数	number	`0`	否
inherit-url-search	需要保存到URL的字段名，如有多个字段用`,`分隔，专辑筛选可以使用 `filter` 来表示所有 `filter` 开头的字段	string	-	否
same-queries-in-array	如果配置了该属性且有配置 `inherit-url-search` 属性时，当字段的值是数组类型，会将该字段名从 `fieldName` 变更为 `fieldName[]` 形式写入URL	-	-	-
record-params-page-plus-one	如果配置了该属性且`inherit-url-search`中配置了页数（例如：`page`），那该值会加1写入URL参数	-	-	-
maintain-page-state	如果配置了该属性且当前是分页形式时，点击了其他页数后，滚动条的位置保持在上一次的位置	-	-	-
track-event-name	每次接口请求上报名称	string	-	否

src 数据来源方式

有两种获取数据的方式：

通过接口api获取数据
spz-script:<spzScriptId>：通过spz-script获取数据

方法

refresh

刷新列表。

参数名	说明	类型	默认值	是否必需
[customName]	可自定义的参数名，可以直接更改请求src的参数	string	-	否
redo	如果为`true`，不保存上一次的记录，重新初始化	boolean	`false`	否

例如：list.refresh(page=1,limit=8,redo=true);。

listRender

通过传递的数据来重新渲染列表。

参数名	说明	类型	默认值	是否必需
data	用来重新渲染的数据	Array	`[]`	否

事件

event 对象数据

属性	说明	类型
data	当前展示的列表数据	Array \| null
total	数据的总条数	number

finish

当列表首次挂载渲染结束时该事件会自动触发。

dom-update

当列表更新渲染结束时该事件会自动触发。