loadmore

loadmore 加载更多

组件结构

  1. <template>
  2.     <view class="tui-loadmore" v-if="visible">
  3.         <view :class="['tui-loading-'+index, (index==3 && type)?'tui-loading-'+type:'']"></view>
  4.         <view class="tui-loadmore-tips">{{text}}</view>
  5.     </view>
  6. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiLoadmore",
  4.         props: {
  5.             //显示文本
  6.             text: {
  7.                 type: String,
  8.                 default: "正在加载..."
  9.             },
  10.             //是否可见
  11.             visible: {
  12.                 type: Boolean,
  13.                 default: false
  14.             },
  15.             //loading 样式 ：1,2,3
  16.             index: {
  17.                 type: Number,
  18.                 default: 1
  19.             },
  20.             //颜色设置，只有index=3时生效：primary，red，orange，green
  21.             type: {
  22.                 type: String,
  23.                 default: ""
  24.             }
  25.         }
  26.     }
  27. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "text" : 显示文本,类型:"String",默认值:"正在加载..."
     "visible" : 是否显示,类型:"Boolean",默认值:false
     "index" : loading 样式 ：[1,2,3],类型:"Number",默认值:1
     "type" : 颜色设置，只有index=3时生效：primary，red，orange，green,类型:"String",默认值:""

 methods:
   无

示例

... 此处省略n行,下载源码查看