loadmore

loadmore 加载更多

组件结构

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

组件脚本

  1. <script>
  2. exportdefault{
  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行,下载源码查看

loading nomore