spz-list

• The list must have a <template> <!-- ... --> </template> child element or specify a template attribute.
• The element has a current-page attribute to indicate which page is currently loaded. For example current-page="2".

<spz-list
  row
  layout="container"
  size="limit"
  page-size="20"
  list="data.products"
  initial-page="0"
  total="data.count"
  keep-behavior="filter,sort_by"
  initial-total="40"
  src="/api/collections/f983e5a2-099d-475d-bbbd-ea4b4e09e7a3/cps?page=0&limit=20"
  template="product-template"
  track-event-name="collection_list_change"
  infinite-scroll
></spz-list>

required

Specifies an API URL. Src attribute usage

If this attribute is present, the template doesn’t render at the beginning unless triggered by refresh.

<spz-list
  manual
  layout="container"
  size="limit"
  page-size="16"
  list="data.products"
  src="/api/collections/22a48687-bf62-45d6-bc54-18ccabf72f36/cps?page=0&limit=16"
  template="product-template"
  id="collection-list"
></spz-list>

<button type="button" @tap="collection-list.refresh()">Refresh</button>

If this attribute is present, the element will be styled as follows:

spz-list[row] {
  display: flex;
  flex-direction: row;
  overflow: auto;
}

spz-list[row] > * {
  flex-shrink: 0;
}

If there is no this attribute, the default style is:

<spz-list
  ...
  style="display: grid;"
></spz-list>

A integer number. Specifies the number of columns of each row. It uses the waterfall arrangement to arrange downwards. For example column-count="4", the default style is:

<spz-list
  ...
  style="display: grid; grid-template-columns: 25% 25% 25% 25%;"
></spz-list>

Get the data from a path in the given data object. Its default value is data.list.

In the following example, if the list value is data.list that returns an array of the data.list.

const data = {
  list: [ /* ... */ ],
  products: [ /* ... */ ],
  count: 28
};

Get the items total from a path in the given data object. Its default value is total.

In the following example, if the total value is data.count that returns 28 of the data.count.

const data = {
  list: [ /* ... */ ],
  products: [ /* ... */ ],
  count: 28
};

The parameter name representing the number of pages in the request API. Its default value is page.

If you have a /api/products API, it accepts two parameters, which are current_page and per_page. You must set the page attribute to current_page.

The parameter name indicating the number of pages per page in the request API. Its default value is limit.

If you have a /api/products API, it accepts two parameters, which are current_page and per_page. You must set the size attribute to per_page.

Specifies the number of requests per page. Its default value is 1000.

Specifies the index of the first page where the request API starts. Its default value is 1.

If the page attribute of the request API starts at 0, you can set the initial-page attribute to 0.

Specifies the format of the request parameter. It has the following values:

• kv-pair: default Parse querystring as a key and value pair.
• array: Parse querystring as a array.
• string: Parse querystring as a string.

Whether to obtain the corresponding value from the request parameter to save the last behavior. It is a string separated by ,.

For example keep-behavior="filter,sort_by", indicates that save sorted and filtered records.

If this attribute is present, scrolling automatically loads the next page of data until the last page.

If this attribute is present, it indicates that only one page is loaded or only one page of data is displayed.

If this attribute is present, use sequential loading animation effects to show.

Specifies the delay time of the sequential loading animation effect. It must be used with the display-in-order attribute. Its default value is 100.

Same as IntersectionObserver.rootMargin. Its default value is 200px.

A string of the event name. Report data when the element is changed.

It will be added to the element when the data is being requested.

It will be added to the element when the request completes.

It will be added to the element when there is next page data.

It will be added to the element when there is no next page data.

It will be added to the element when the data is empty.

refresh([redo=<Boolean>])

Refresh the rendering of the element. It has the following parameters:

• redo: A Boolean attribute, defaults to true. If its value is true, indicates that the previous parameters are cleared.

render(data=<Object>)

Use the passed data to render the template. It has a parameter:

• data: A Object that contains the keys corresponding to the list and total attribute.

If the list value is data.list, the total value is data.count, the data must contain the following keys:

{
  "list": [
    // ...
  ],
  "count": 112
}

Be automatically triggered when the list is initialized or updated.

event object data

{
  "list": [ // the list current page data

  ],
  "total": 20 // Total number of items in the list
}

Be automatically triggered at the end of each request.

event object data

{
  "data": [ // the list current page data
    // ...
  ],
  "total": 20 // Total number of items in the list
}