nomore

nomore 没有更多了

组件结构

  1. <template>
  2.     <view class="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.     export default {
  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 →