u-loadmore.vue 4.5 KB

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