点我扫二维码，查看demo

# PullRefresh 下拉刷新

# 介绍

用于提供下拉刷新的交互操作。

# 引入

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

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

Vue.use(PullRefresh);

1
2
3
4

# 代码演示

# 基础用法

下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 loading 设置为 false，表示加载完成。通过 finished 参数来控制刷新是否完成。默认为 false。

<template>
<div class="container">
    <mx-pull-refresh :loading="loading" :finished="finished" @refresh="onRefresh">
        <div>刷新次数:{{count}}次</div>
    </mx-pull-refresh>
</div>
</template>
<script>
export default{
    data(){
        return {
            count:0,
            loading:false,
            finished:false
        }
    },
    methods:{
        onRefresh(){
            if(this.count === 20){
                this.finished = true
                return
            }
            this.loading = true
            setTimeout(()=>{
                this.count++
                this.loading = false
            },2000)
        }
    }
}
</script>
<style scoped>
.container{
    height: 200px;
}
</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

# 自定义提示

通过插槽可以自定义下拉刷新过程中的提示内容。

<template>
<div class="container">
    <mx-pull-refresh  @refresh="onRefresh1" :loading="loading1">
        <div slot="pull">while pulling</div>
        <div slot="loose">while loosing</div>
        <div slot="loading">while loading</div>
        <div slot="finieshed">while finished</div>
        <div>hello mx pull refresh</div>
    </mx-pull-refresh>
</div>
</template>
<script>
export default {
    data(){
        return {
            count:0,
            loading:false,
            finished:false
        }
    },
    methods:{
        onRefresh(){
            if(this.count === 20){
                this.finished = true
                return
            }
            this.loading = true
            setTimeout(()=>{
                this.count++
                this.loading = false
            },2000)
        }
    }
}
</script>
<style scoped>
.container{
    height: 200px;
}
</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

# Api

# Props

参数	说明	类型	默认值	是否必须
distanceToRefresh	触发刷新拖动的距离	number	`50`	`-`
loading	是否正在加载	boolean	`false`	`-`
finished	是否加载完成	boolean	`false`	`-`

# Events

事件名称	说明	参数
refresh	下拉刷新时触发	`-`

# Slots

名称	说明	参数
default	自定义内容	`-`
pull	自定义下拉时的提示信息	`-`
loose	自定义释放时的提示信息	`-`
loading	自定义加载时的提示信息	`-`
finished	自定义刷新完时的提示信息	`-`

← Overlay 蒙层组件 Steps 步骤条 →