DolphinHybrid
点我扫二维码，查看demo

# List 列表

# 介绍

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { List } from '@dolphin-iot/ui'

Vue.use(List);
1
2
3
4

# 代码演示

# 基础用法

列表通过loading finished 的值控制列表滚动。

<template>
    <div>
		<mx-list
			key="base" 
			v-model="loading"
			:loading="loading" 
			:finished="finished" 
			@load="onLoad"
		>
			<li v-for="(item,index) of list" class="list-item" :key="index + 'base' ">{{item}}</li>
		</mx-list>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: ['广州','深圳','佛山','东莞','肇庆'],
                loading: false,
                finished: false,
            }
        },
        methods: {
            onLoad(e) {
                setTimeout(()=>{
                    if (this.finished) return;
                    let num = this.list.length
                    for(let i = num; i <= num + 5; i ++) {
                        this.list.push(i);
                    }
                    this.loading = false;
                    if (this.list.length > 40) {
                        this.finished = true;
                    }
                },1000)
                
            },
        }
    }
</script>

<style lang="scss" scoped>
    .list-item {
        height: 36px;
        text-align:center;
        line-height: 36px;
        border-bottom: 1px solid #f2f2f2
    }
    
</style>
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
39
40
41
42
43
44
45
46
47
48
49
50
51

# 错误提示

用于下拉加载数据出错进行提示，点击可以重新加载

<template>
    <div>
        <mx-pull-refresh @refresh="onRefresh">
			<mx-list
				key="refresh" 
				:loading="loading2" 
				:finished="finished2" 
				@load="onRefreshLoad"
				v-if="basic === 2"
			>
				<li v-for="(item,index) of list2" class="list-item" :key="index">{{item}}</li>
			</mx-list>
	   </mx-pull-refresh>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list2: [1,2,3,4,5],
                loading1: false,
                finished: false,
                error: false,
            }
        },
        methods: 
            getDataList() {
                return new Promise((res,rec) => {
                    if (this.finished1) return;
                    this.error = false;
                    let num = this.list1.length;
                    for (let i = num; i < num + 6; i ++) {
                        this.list1.push(i);
                    }
                    if (this.list1.length < 15) {
                        rec();
                    } else if (this.list1.length > 20) {
                        res();
                    }

                })
            },
            onLoadError() {
                this.getDataList().then(res => {
                    this.finished1 = true;
                    this.loading1 = false;
                }).catch(rec =>{
                    this.error = true;
                    console.log(this.error)
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .demo-list {
        width: 100%;
        box-sizing: border-box;
        min-height: calc(100vh - 40px);
        padding-bottom: 20px;
        background-color: white;
        p {
            padding: 0 !important;
            font-size: 16px;
        }
    }
    .list-item {
        height: 36px;
        text-align:center;
        line-height: 36px;
        border-bottom: 1px solid #f2f2f2
    }
    
</style>
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

# 下拉刷新

下拉刷新需要引入PullRefresh组件

<template>
    <div>
        <div class="demo-list">
            <mx-pull-refresh @refresh="onRefresh">
                <mx-list
                    key="refresh" 
                    :loading="loading2" 
                    :finished="finished2" 
                    @load="onRefreshLoad"
                >
                    <li v-for="(item,index) of list2" class="list-item" :key="index">{{item}}</li>
                </mx-list>
            </mx-pull-refresh>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list3: ['a', 'b','c','d'],
                loading2: false,
                finished2: false,
            }
        },
        methods: {
            onRefresh() {
              
            },
            onRefreshLoad() {
                if (this.finished2) {
                    return
                }
                for(let i = 8; i < 15 ; i ++) {
                    this.list2.push(i);
                }
                this.loading2 = false;
                this.finished2 = true;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .demo-list {
        width: 100%;
        box-sizing: border-box;
        min-height: calc(100vh - 40px);
        padding-bottom: 20px;
        background-color: white;
        p {
            padding: 0 !important;
            font-size: 16px;
        }
    }
    .list-item {
        height: 36px;
        text-align:center;
        line-height: 36px;
        border-bottom: 1px solid #f2f2f2
    }
    
</style>
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# API

# Prop

字段 说明 类型 默认值
loading 加载的状态标识符 boolean false
finished 结束加载的状态标识符 boolean false
error 加载出错标识符 boolean false
loading-text 加载中的提示文字 string -
finished-text 加载结束时的提示文字 string 没有更多了
error-text 加载出错时的提示文字 string 加载错误，点击重试
offset 自定义距离底部高度触发加载 number 10
immediate-heck 进入页面后是否立即加载 boolean true
loading-type 加载图标,可选值为：circle spinner string spinner

# Events

事件名 说明 回调函数
load 用户下拉时触发

# Slots

名称 说明
default 自定义列表内容
loading 自定义加载过程中的文案
finished 自定义加载结束后的文案
error 自定义加载失败时的文案
更新时间: 12/3/2021, 1:36:49 PM

← Collapse 折叠面板 →