list-item
更新时间：
<list>的子组件，用来展示列表具体 item，宽度默认充满 list 组件，支持子组件，支持通用属性，支持<div>样式，不支持 position 样式，支持通用样式，支持通用事件
属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| type | <string> |
- | 是 | list-item 类型，值为自定义的字符串，如'loadMore'。相同的 type 的 list-item 必须具备完全一致的 DOM 结构。因此，在 list-item 内部需谨慎使用 if 和 for，因为 if 和 for 可能造成相同的 type 的 list-item 的 DOM 结构不一致，从而引发错误 |
样式
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| column-span | <number> |
1 | 否 | list-item 在 list 中所占列数，一般用于 list 多列显示时。 |
Slots
| name | 描述 |
|---|---|
| right | 左滑后，在右端显示 |
list-item组件示例
基本用法
<template>
<list class="wrapper">
<list-item type="item" class="list-item" for="{{ count }}">
<text class="text">{{ $item }}</text>
</list-item>
</list>
</template>
<script>
export default {
data() {
return {
count: Array.from({ length: 20 }, (v, i) => i)
}
}
}
</script>
<style>
.list-item {
height: 180px;
align-items: center;
justify-content: center;
}
.text {
width: 680px;
height: 160px;
font-size: 50px;
text-align: center;
background-color: #e8f3fe;
color: #7dbcfc;
}
</style>
复制代码
