Mint UI 下拉/上拉刷新-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? 的方法就會執(zhí)行

loadTop() {
  ...// 加載更多數(shù)據(jù)
  this.$refs.loadmore.onTopLoaded();
}

注意在這個方法的最后需要手動調(diào)用 ?loadmore? 的 ?onTopLoaded? 事件。這是因為在加載數(shù)據(jù)后需要對組件進(jìn)行一些重新定位的操作。

列表底部的上拉刷新與之類似

loadBottom() {
  ...// 加載更多數(shù)據(jù)
  this.allLoaded = true;// 若數(shù)據(jù)已全部獲取完畢
  this.$refs.loadmore.onBottomLoaded();
}

唯一的區(qū)別是，當(dāng)?shù)撞繑?shù)據(jù)全部獲取完畢時，可以將綁定到組件 ?bottom-all-loaded? 屬性的變量賦值為 ?true?，這樣 ?bottom-method? 就不會再次執(zhí)行了。

手指在屏幕上滑動的距離與組件實際移動的距離比值可以通過 ?distance-index? 參數(shù)配置，默認(rèn)值為 2。

自定義 HTML 模板

可以為列表頂部和底部的加載提示區(qū)域提供自定義的 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 模板的最外層標(biāo)簽設(shè)置 ?slot? 屬性為 ?top?，類名為 ?mint-loadmore-top?。當(dāng)用戶滑動組件時，組件會有以下幾個狀態(tài)：

• ?pull?：組件已經(jīng)被按下，但按下的距離未達(dá)到 topDistance，此時釋放不會觸發(fā) top-method，列表會回到初始位置
• ?drop?：按下的距離不小于 topDistance，此時釋放會觸發(fā) top-method
• ?loading?：組件已被釋放，top-method 正在執(zhí)行 每當(dāng)組件的狀態(tài)發(fā)生變化時，loadmore都會觸發(fā) top-status-change 方法，參數(shù)為組件目前的狀態(tài)。因此可以像本例一樣，使用一個 handleTopChange 方法來處理組件狀態(tài)的變化。

配置加載提示區(qū)域的文字

在不使用自定義 HTML 模板的情況下，可以配置 loadmore 本身自帶的加載提示區(qū)域的文字。以列表頂部為例，對應(yīng)于 ?status? 的三個狀態(tài)，可配置的屬性依次為 ?topPullText?、?topDropText? 和 ?topLoadingText?。與之對應(yīng)的底部屬性為 ?bottomPullText?、?bottomDropText ?和 ?bottomLoadingText?。

自動檢測

loadmore 在初始化時會自動檢測它的高度是否能夠撐滿其容器，如果不能則會調(diào)用 bottom-method，直到撐滿容器為止。如果不希望使用這一機(jī)制，可以將 auto-fill 設(shè)為 false。

API

Events

Slot