u-loadmore.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <view
  3. class="u-loadmore"
  4. :style="[
  5. $u.addStyle(customStyle),
  6. {
  7. backgroundColor: bgColor,
  8. marginBottom: $u.addUnit(marginBottom),
  9. marginTop: $u.addUnit(marginTop),
  10. height: $u.addUnit(height),
  11. },
  12. ]"
  13. >
  14. <u-line
  15. length="140rpx"
  16. color="#E6E8EB"
  17. :hairline="false"
  18. v-if="line"
  19. ></u-line>
  20. <!-- 加载中和没有更多的状态才显示两边的横线 -->
  21. <view
  22. :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''"
  23. class="u-loadmore__content"
  24. >
  25. <view
  26. class="u-loadmore__content__icon-wrap"
  27. v-if="status === 'loading' && icon"
  28. >
  29. <u-loading-icon
  30. :color="iconColor"
  31. size="17"
  32. :mode="loadingIcon"
  33. ></u-loading-icon>
  34. </view>
  35. <!-- 如果没有更多的状态下,显示内容为dot(粗点),加载特定样式 -->
  36. <text
  37. class="u-line-1"
  38. :style="[loadTextStyle]"
  39. :class="[(status == 'nomore' && isDot == true) ? 'u-loadmore__content__dot-text' : 'u-loadmore__content__text']"
  40. @tap="loadMore"
  41. >{{ showText }}</text>
  42. </view>
  43. <u-line
  44. length="140rpx"
  45. color="#E6E8EB"
  46. :hairline="false"
  47. v-if="line"
  48. ></u-line>
  49. </view>
  50. </template>
  51. <script>
  52. import props from './props.js';
  53. /**
  54. * loadmore 加载更多
  55. * @description 此组件一般用于标识页面底部加载数据时的状态。
  56. * @tutorial https://www.uviewui.com/components/loadMore.html
  57. * @property {String} status 组件状态(默认 'loadmore' )
  58. * @property {String} bgColor 组件背景颜色,在页面是非白色时会用到(默认 'transparent' )
  59. * @property {Boolean} icon 加载中时是否显示图标(默认 true )
  60. * @property {String | Number} fontSize 字体大小(默认 14 )
  61. * @property {String} color 字体颜色(默认 '#606266' )
  62. * @property {String} loadingIcon 加载图标(默认 'circle' )
  63. * @property {String} loadmoreText 加载前的提示语(默认 '加载更多' )
  64. * @property {String} loadingText 加载中提示语(默认 '正在加载...' )
  65. * @property {String} nomoreText 没有更多的提示语(默认 '没有更多了' )
  66. * @property {Boolean} isDot 到上一个相邻元素的距离 (默认 false )
  67. * @property {String} iconColor 加载中图标的颜色 (默认 '#b7b7b7' )
  68. * @property {String | Number} marginTop 上边距 (默认 10 )
  69. * @property {String | Number} marginBottom 下边距 (默认 10 )
  70. * @property {String | Number} height 高度,单位px (默认 'auto' )
  71. * @property {Boolean} line 是否显示左边分割线 (默认 false )
  72. * @event {Function} loadmore status为loadmore时,点击组件会发出此事件
  73. * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
  74. */
  75. export default {
  76. name: "u-loadmore",
  77. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  78. data() {
  79. return {
  80. // 粗点
  81. dotText: "●"
  82. }
  83. },
  84. computed: {
  85. // 加载的文字显示的样式
  86. loadTextStyle() {
  87. return {
  88. color: this.color,
  89. fontSize: uni.$u.addUnit(this.fontSize),
  90. lineHeight: uni.$u.addUnit(this.fontSize),
  91. backgroundColor: this.bgColor,
  92. }
  93. },
  94. // 显示的提示文字
  95. showText() {
  96. let text = '';
  97. if (this.status == 'loadmore') text = this.loadmoreText
  98. else if (this.status == 'loading') text = this.loadingText
  99. else if (this.status == 'nomore' && this.isDot) text = this.dotText;
  100. else text = this.nomoreText;
  101. return text;
  102. }
  103. },
  104. methods: {
  105. loadMore() {
  106. // 只有在“加载更多”的状态下才发送点击事件,内容不满一屏时无法触发底部上拉事件,所以需要点击来触发
  107. if (this.status == 'loadmore') this.$emit('loadmore');
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. @import "../../libs/css/components.scss";
  114. .u-loadmore {
  115. @include flex(row);
  116. align-items: center;
  117. justify-content: center;
  118. flex: 1;
  119. &__content {
  120. margin: 0 15px;
  121. @include flex(row);
  122. align-items: center;
  123. justify-content: center;
  124. &__icon-wrap {
  125. margin-right: 8px;
  126. }
  127. &__text {
  128. font-size: 14px;
  129. color: $u-content-color;
  130. }
  131. &__dot-text {
  132. font-size: 15px;
  133. color: $u-tips-color;
  134. }
  135. }
  136. }
  137. </style>