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 生成自定义数据格式来展示列表。
${data.title}
<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
来展示多列瀑布流。
${data.title}
<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 和 1 |
number | - | 是 |
infinite-scroll | 如果配置了该属性,则列表使用滚动加载的方式来展示 | - | - | 否 |
initial-total | 列表总条数 | number | 0 |
否 |
inherit-url-search | 需要保存到URL的字段名,如有多个字段用, 分隔,专辑筛选可以使用 filter 来表示所有 filter 开头的字段 |
string | - | 否 |
list | 从返回的数据获取列表数据的路径 | string | data.list |
否 |
loading | 当处于正在请求数据过程中时,会自动加上该属性 | - | - | - |
manual | 如果该属性存在,组件挂载时不立即渲染(或不立即请求数据) | - | - | - |
maintain-page-state | 如果配置了该属性且当前是分页形式时,点击了其他页数后,滚动条的位置保持在上一次的位置 | - | - | - |
page | 从接口请求的src中表示第几页的字段名 | string | page |
否 |
page-size | 从接口请求的src中表示每页数量的值 | number | 1000 |
否 |
record-params-page-plus-one | 如果配置了该属性且inherit-url-search 中配置了页数(例如:page ),那该值会加1写入URL参数 |
- | - | - |
src | 获取数据的路径 | string | - | 是 |
size | 从接口请求的src中表示限制每页数量的字段名 | string | limit |
否 |
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 | masonry |
string | - | 否 |
total | 从返回的数据获取列表总数的路径 | string | total |
否 |
track-event-name | 每次接口请求上报名称 | string | - | 否 |
src 数据来源方式
跳转到“src 数据来源方式”有两种获取数据的方式:
- 通过接口api获取数据
spz-script:<spzScriptId>
:通过spz-script
获取数据
方法
跳转到“方法”refresh
跳转到“refresh”刷新列表。
参数名 | 说明 | 类型 | 默认值 | 是否必需 |
---|---|---|---|---|
[customName] | 可自定义的参数名,可以直接更改请求src的参数 | string | - | 否 |
redo | 如果为true ,不保存上一次的记录,重新初始化 |
boolean | false |
否 |
例如:list.refresh(page=1,limit=8,redo=true);
。
listRender
跳转到“listRender”通过传递的数据来重新渲染列表。
参数名 | 说明 | 类型 | 默认值 | 是否必需 |
---|---|---|---|---|
data | 用来重新渲染的数据 | Array | [] |
否 |
scrollIntoTop
跳转到“scrollIntoTop”将页面跳转到列表顶部位置,无需参数。
事件
跳转到“事件”event 对象数据
跳转到“event 对象数据”属性 | 说明 | 类型 |
---|---|---|
data | 当前展示的列表数据 | Array | null |
total | 数据的总条数 | number |
finish
跳转到“finish”当列表首次挂载渲染结束时该事件会自动触发。
dom-update
跳转到“dom-update”当列表更新渲染结束时该事件会自动触发。
beforeFetchStart
跳转到“beforeFetchStart”在列表请求数据的前一刻自动触发。
error
跳转到“error”当列表请求api数据发生错误时自动触发。