long-list
更新时间：
用于超长列表的显示。
子组件
不支持。
属性
支持通用属性
| 名称 | 类型 | 默认值 | 必 | |
|---|---|---|---|---|
| content | <array> |
- | 是 | 长列表数据内容，详见content-item数据结构 |
content-item 数据结构：
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| slot | <string> |
- | 是 | 用于指定改条数据使用的元素注册名 |
示例：
<template>
<long-list content="{{content}}"></long-list>
</template>
<script>
export default {
data: {
content: [
{
slot: 'contact-index',
name: 'D',
},
{
slot: 'contact-info',
name: '达达姐',
},
],
},
}
</script>复制代码
样式
支持通用样式
事件
支持通用事件
| 名称 | 参数 | 描述 |
|---|---|---|
| itemclick | { index } | 当前 item 被点击时触发，返回索引位置 |
| scrollindex | {first, last} | 返回 list 可视范围的索引范围。first:可视范围第一个 item 的索引；last:可视范围最后一个 item 的索引； |
示例
<template>
<long-list @itemclick="handItemClick" @scrollindex="handScrollindex"></long-list>
</template>
<script>
export default {
handItemClick(evt) {
console.log(`第${evt.index}个 item 被点击`)
},
handScrollindex(evt) {
console.log(`当前列表窗口中，最上面的 item 是${evt.first}，最下面的 item 是${evt.last}`)
},
}
</script>复制代码
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| setProps | Object | 给 item 设置属性数据 |
| scrollTo | Object | 滚动到指定 item 位置 |
| append | Array<Object> | 追加 content 数据 |
setProps 的参数说明：
| 属性 | 类型 | 描述 |
|---|---|---|
| index | Number | 需要传递属性的 item 索引 |
| params | Object | 传递给 item 的数据 |
scrollTo 的参数说明:
| 名称 | 类型 | 是否必选 | 默认值 | 备注 |
|---|---|---|---|---|
| index | number | 是 | 无 | list 滚动的目标 item 位置 |
示例
// 给第 99 个 item 标记为激活状态。对应的 item 需要有对应的解析能力。
this.$element('long-list').setProps({
index: 99,
params: {
active: 1,
},
})
// 滚动到第 99 个 item 位置
this.$element('long-list').scrollTo({ index: 99 })
// 追加 content 内容
this.$element('long-list').append({
content: [
{ slot: 'contact-index', name: 'C' },
{ slot: 'contact-info', name: '曹哥' },
],
})复制代码
子元素定制
| 注册名 | 接收的属性 | 描述 |
|---|---|---|
| contact-index | name: 显示字母索引文案 | 用于展示联系人的字母索引 |
| contact-info | name: 联系人名称 | 联系人详情 |
示例
<template>
<long-list
content="{{content}}"
@itemclick="handItemClick"
@scrollindex="handScrollindex"
></long-list>
</template>
<script>
export default {
data: {
content: [
{
slot: 'contact-index',
name: 'D',
},
{
slot: 'contact-info',
name: '达达姐',
},
{
slot: 'contact-info',
name: '多多',
},
{
slot: 'contact-index',
name: 'F',
},
{
slot: 'contact-info',
name: '峰哥',
},
{
slot: 'contact-info',
name: '凤姐',
},
],
},
handItemClick(evt) {
console.log(`第${evt.index}个 item 被点击`)
},
handScrollindex(evt) {
console.log(`当前列表窗口中，最上面的 item 是${evt.first}，最下面的 item 是${evt.last}`)
},
onShow() {
this.$element('long-list').scrollTo({ index: 2 })
},
}
</script>复制代码