PullRefresh 下拉刷新

PullRefresh 下拉刷新

#介绍

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

#引入

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

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

Vue.use(PullRefresh);

#代码演示

#基础用法

下拉刷新时会触发 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>

#自定义提示

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

<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>

#Api

#Props

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

#Events

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

#Slots

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