下拉/上拉刷新 | Loadmore

下拉/上拉刷新，支持自定义 HTML 模板。

引入

import { Loadmore } from 'mint-ui';

Vue.component(Loadmore.name, Loadmore);

例子

<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</mt-loadmore>

以列表顶部的下拉刷新为例：按住列表，下拉一定距离（通过 topDistance 配置）后释放，被指定为 top-method 的方法就会执行

loadTop() {
  ...// 加载更多数据
  this.$refs.loadmore.onTopLoaded();
}

注意在这个方法的最后需要手动调用 loadmore 的 onTopLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。

列表底部的上拉刷新与之类似

loadBottom() {
  ...// 加载更多数据
  this.allLoaded = true;// 若数据已全部获取完毕
  this.$refs.loadmore.onBottomLoaded();
}

唯一的区别是，当底部数据全部获取完毕时，可以将绑定到组件 bottom-all-loaded 属性的变量赋值为 true，这样 bottom-method 就不会再次执行了。

手指在屏幕上滑动的距离与组件实际移动的距离比值可以通过 distance-index 参数配置，默认值为 2。

自定义 HTML 模板

可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板

<template>
  <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
    <div slot="top" class="mint-loadmore-top">
      <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
      <span v-show="topStatus === 'loading'">Loading...</span>
    </div>
  </mt-loadmore>
</template>
<script>
  export default {
    data() {
      return {
        topStatus: '',
        // ...
      };
    },
    methods: {
      handleTopChange(status) {
        this.topStatus = status;
      },
      // ...
    },
    // ...
  };
</script>

比如需要配置列表顶部的 HTML，则需要为自定义 HTML 模板的最外层标签设置 slot属性为 top，类名为 mint-loadmore-top。当用户滑动组件时，组件会有以下几个状态：

pull：组件已经被按下，但按下的距离未达到 topDistance，此时释放不会触发 top-method，列表会回到初始位置
drop：按下的距离不小于 topDistance，此时释放会触发 top-method
loading：组件已被释放，top-method 正在执行每当组件的状态发生变化时，loadmore 都会触发 top-status-change 方法，参数为组件目前的状态。因此可以像本例一样，使用一个 handleTopChange 方法来处理组件状态的变化。

配置加载提示区域的文字

在不使用自定义 HTML 模板的情况下，可以配置 loadmore 本身自带的加载提示区域的文字。以列表顶部为例，对应于 status 的三个状态，可配置的属性依次为 topPullText、topDropText 和 topLoadingText。与之对应的底部属性为 bottomPullText、bottomDropText 和 bottomLoadingText。

自动检测

loadmore 在初始化时会自动检测它的高度是否能够撑满其容器，如果不能则会调用 bottom-method，直到撑满容器为止。如果不希望使用这一机制，可以将 auto-fill 设为 false。

API

参数	说明	类型	默认值
autoFill	若为真，loadmore?会自动检测并撑满其容器	Boolean	true
distanceIndex	手指移动与组件移动距离的比值	Number	2
maxDistance	组件可移动的最大距离（像素），若为 0 则不限制	Number	0
topPullText	topStatus?为?pull?时加载提示区域的文字	String	'下拉刷新'
topDropText	topStatus?为?drop?时加载提示区域的文字	String	'释放更新'
topLoadingText	topStatus?为?loading?时加载提示区域的文字	String	'加载中...'
topDistance	触发?topMethod的下拉距离阈值（像素）	Number	70
topMethod	下拉刷新执行的方法	Function
bottomPullText	bottomStatus?为?pull?时加载提示区域的文字	String	'上拉刷新'
bottomDropText	bottomStatus?为?drop?时加载提示区域的文字	String	'释放更新'
bottomLoadingText	bottomStatus?为?loading?时加载提示区域的文字	String	'加载中...'
bottomDistance	触发?bottomMethod?的上拉距离阈值（像素）	Number	70
bottomMethod	上拉刷新执行的方法	Function
bottomAllLoaded	若为真，则?bottomMethod?不会被再次触发	Boolean	false

Events

事件名称	说明	回调参数
top-status-change	组件顶部状态发生变化时的回调函数	组件顶部的新状态名
bottom-status-change	组件底部状态发生变化时的回调函数	组件底部的新状态名

Slot

name	描述
-	数据列表
top	自定义顶部加载提示区域 HTML 模板
bottom	自定义底部加载提示区域 HTML 模板

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-09-12