List 列表

使用指南

import { List } from 'fs-ui'

export default {
  components: {
    fsList: List
  }
}

1
2
3
4
5
6
7

说明

使用时loading功能时，建议距离底部有一定高度，不然滑倒底部会一直加载

代码演示

带标题

<fs-list title="文字">
  <fs-list-item
    v-for="(item, index) in list" :key="`list_${index}`"
    :title="item.title"
    :describe="item.describe">
  </fs-list-item>
</fs-list>

1
2
3
4
5
6
7

查看更多按钮

<fs-list title="文字" more @more="handleMore">
  <fs-list-item
    v-for="(item, index) in list" :key="`list_${index}`"
    :title="item.title"
    :describe="item.describe"
    :img="item.img">
  </fs-list-item>
</fs-list>

1
2
3
4
5
6
7
8

<fs-list title="文字" @load="onLoad" v-model="loading" :finished="finished" loading-text="加载中" finished-text="没有更多数据了">
  <fs-cell :title="item.title" :titleImg="item.img" to="/search" v-for="(item, index) in list2" :key="index"></fs-cell>
</fs-list>

1
2
3

data () {
  return {
    finished: false,
    loading: false,
    list2: [
      {
        title: '标题',
        img: 'https://dummyimage.com/60x60/509292/fff'
      },
      {
        title: '标题',
        img: 'https://dummyimage.com/60x60/509292/fff'
      }
    ]
  }
},
methods: {
  onLoad () {
    // 异步更新数据
    setTimeout(() => {
      let list = [...this.list2]
      this.list2 = list.concat({
        title: '标题',
        img: 'https://dummyimage.com/60x60/333333/fff'
      },
      {
        title: '标题',
        img: 'https://dummyimage.com/60x60/333333/fff'
      })
      // 加载状态结束
      this.loading = false
      if (this.list2.length >= 40) {
        // 数据全部加载完成
        this.finished = false
      }
    }, 1000)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

属性

参数	说明	类型	默认值
v-model	双向绑定加载更多的值, 不使用loading功能不用指定	Boolen	-
title	标题	String	-
more	查看更多按钮	Boolen	-
finished	设置true,不会触发load事件	Boolen	false
offset	用于调整loading时触发的底部高度，例如：list 距离底部 30px, 设置offset为10，当滑动到距离底部10px时，就触发了loading事件	Number	0
loading-text	加载中说明文字	String	-
finished-text	加载完成说明文档	String	-
immediate-check	首次是否调用获取数据,true则会触发load事件	Boolean	true

插槽

插槽名	说明
title	自定义title内容
more	自定义more内容
finished-text	自定义finished-text内容

事件

event	说明	返回值
more	点击查看更多	event
load	加载更多的事件	event

← Card 卡片 ListItem 列表内容 →