LoadMore 加载更多

此组件一般用于标识页面底部加载数据时的状态

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

<template>
  <view>
    <tn-load-more></tn-load-more>
  </view>
</template>

加载中

<template>
  <view>
    <tn-load-more status="loading" :loadingIcon="false"></tn-load-more>
    <tn-load-more class="tn-margin-top" status="loading"></tn-load-more>
    <tn-load-more class="tn-margin-top" status="loading" loadingIconColor="#01BEFF"></tn-load-more>
    <tn-load-more class="tn-margin-top" status="loading" loadingIconType="flower"></tn-load-more>
  </view>
</template>

没有更多

<template>
  <view>
    <tn-load-more status="nomore"></tn-load-more>
    <view class="tn-margin-top">
      <tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
    </view>
  </view>
</template>

修改提示语

<template>
  <view>
    <tn-load-more status="loadmore" :loadText="loadText"></tn-load-more>
    <view class="tn-margin-top">
      <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText"></tn-load-more>
    </view>
    <view class="tn-margin-top">
      <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText"></tn-load-more>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loadText: {
        loadmore: '下拉加载',
        loading: '快速加载中...',
        nomore: '已经没有了啊'
      }
    }
  }
}
</script>

修改颜色

<template>
  <view>
    <tn-load-more status="loadmore" :loadText="loadText" fontColor="#01BEFF"></tn-load-more>
    <view class="tn-margin-top">
      <tn-load-more class="tn-margin-top" status="loading" :loadText="loadText" fontColor="tn-color-indigo">
      </tn-load-more>
    </view>
    <view class="tn-margin-top">
      <tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText" fontColor="rgba(255, 129, 129, 0.8)">
      </tn-load-more>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loadText: {
        loadmore: '下拉加载',
        loading: '快速加载中...',
        nomore: '已经没有了啊'
      }
    }
  }
}
</script>

修改字体尺寸

<tn-load-more :fontSize="32"></tn-load-more>

API

Props

参数	说明	类型	默认值	可选值
status	加载状态	String	loadmore	loadmore / loading / nomore
loadingIcon	显示加载图标	Boolean	true	false
loadingIconType	加载图标样式，参考tn-loading组件的加载类型 circle (圆圈) flower (花朵形状)	String	circle	circle / flower
loadingIconColor	在圆圈加载状态下，圆圈的颜色	String	-	-
loadText	显示的文字	Object	{ loadmore: '加载更多', loading: '正在加载...', nomore: '没有更多了' }
dot	是否显示粗点，在nomore状态下生效	Boolean	false	true
customStyle	自定义组件样式	Object	-	-