# PullRefresh 下拉刷新

请扫码查看示例

# 介绍

用于下拉刷新数据

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-pull-refresh" src="@/node_modules/mui-minix/src/pull-refresh/index"></element>
<m-pull-refresh class="h-300" @m-refresh="onRefresh" loading="{{loading}}" finished="{{finished}}">
  <div class="wp-100 h-800 f-c f-a-c" >
    <text class="txt c-cyan">{{count}}</text>
  </div>
</m-pull-refresh>

1
2
3
4
5
6

export default {
  data(){
    return {
      count:0,
      loading:false,
      finished:false
    }
  },
  onRefresh(){
    if(this.count >= 20){
      this.finished = true
      return
    }
    this.loading = true
    setTimeout(()=>{
      this.count++
      this.loading = false
    }, 2000)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.h-300{
  height:300px;
}

.wp-100{
  width: 100%
}

.h-800{
  height: 800px;
}

.f-c{
  flex-direction: column;
}

.f-a-c{
  align-items: center;
}

.txt{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

.c-cyan{
  color: #00cbb8;
}

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

# Api

# Prop

字段	说明	类型	默认值	是否必须
`distance-to-refresh`	下拉多少距离,触发刷新	`number`	`50`	`否`
`loading`	是否加载中	`boolean`	`false`	`否`
`finished`	内容已经全部加载完成	`boolean`	`false`	`否`
`text-size`	头部文本字体大小	`number`	`12`	`否`
`finished-text`	内容全部加载完成后,下拉时显示的文本	`string`	`- 没有更多内容了 -`	`否`
`loosing-text`	下拉释放阶段显示的文本	`string`	`释放刷新`	`否`
`pulling-text`	下拉未达到刷新距离时，显示的文本	`string`	`下拉刷新`	`否`
`is-refresh-design`	是否自定义下拉效果, 若为`true`，则原本下拉效果不显示，需自行slot	`boolean`	`false`	`否`

# Slots

当以上配置都不满足的时候，可以使用插槽来自定义刷新状态。

名称	说明
`status`	定义刷新状态，前提: is-refresh-design="true"
`default`	默认插槽，用于展示需要刷新的列表

# Events

名称	说明	回调参数
`m-refresh`	下拉距离达到刷新距离时触发	`-`
`m-change`	组件状态改变时触发	`normal, pulling, loosing, finished`