nomore

nomore 没有更多了

组件结构

  1. <template>
  2. <viewclass="tui-nomore-class tui-loadmore-none"v-if="visible">
  3. <view :class="[isDot?'tui-nomore-dot':'tui-nomore']">
  4. <view :style="{background:bgcolor}" :class="[isDot?'tui-dot-text':'tui-nomore-text']">{{isDot?dotText:text}}</view>
  5. </view>
  6. </view>
  7. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiNomore",
  4. props:{
  5. //是否可见
  6. visible:{
  7. type:Boolean,
  8. default:false
  9. },
  10. //当前页面背景颜色
  11. bgcolor:{
  12. type:String,
  13. default:"#fafafa"
  14. },
  15. //是否以圆点代替 "没有更多了"
  16. isDot:{
  17. type:Boolean,
  18. default:false
  19. },
  20. //isDot为false时生效
  21. text:{
  22. type:String,
  23. default:"没有更多了"
  24. }
  25. },
  26. data(){
  27. return{
  28. dotText:"●"
  29. };
  30. }
  31. }
  32. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "visible" : 是否可见,类型:"Boolean",默认值:false
     "bgcolor" : 当前页面背景颜色,类型:"String",默认值:"#fafafa"
     "isDot" : 是否以圆点代替 "没有更多了",类型:"Boolean",默认值:false
     "text" : 显示文本,isDot为false时生效,类型:"String",默认值:"没有更多了"

 methods:
   无

示例

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

loadmore modal