Cuttlefish Docs
  • 简体中文

    • spz-list 列表

    何时使用

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

    代码演示

    自定义加载按钮

    当子元素拥有loadmore属性时会被当作加载按钮使用，此时列表的翻页方式变更为"加载更多"。

    基本用法

    基本用法，结合 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 生成自定义数据格式来展示列表。

    <script>
  window.SHOPLAZZA = {
    currency_symbol: '$',
    currency_symbol_pos: 'left',
    money_format: 'amount'
  };
</script>

<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>

    属性

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

    src 数据来源方式

    有两种获取数据的方式：

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

    方法

    refresh

    刷新列表。

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

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

    listRender

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

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

    scrollIntoTop

    将页面跳转到列表顶部位置，无需参数。

    事件

    event 对象数据

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

    finish

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

    dom-update

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

    beforeFetchStart

    在列表请求数据的前一刻自动触发。

    error

    当列表请求api数据发生错误时自动触发。