u-loadmore.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="u-load-more-wrap" :style="{
  3. backgroundColor: bgColor,
  4. marginBottom: marginBottom + 'rpx',
  5. marginTop: marginTop + 'rpx',
  6. height: $u.addUnit(height)
  7. }">
  8. <u-line color="#d4d4d4" length="50"></u-line>
  9. <!-- 加载中和没有更多的状态才显示两边的横线 -->
  10. <view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
  11. <view class="u-loadmore-icon-wrap">
  12. <u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
  13. </view>
  14. <!-- 如果没有更多的状态下,显示内容为dot(粗点),加载特定样式 -->
  15. <view class="u-line-1" :style="[loadTextStyle]" :class="[(status == 'nomore' && isDot == true) ? 'u-dot-text' : 'u-more-text']" @tap="loadMore">
  16. {{ showText }}
  17. </view>
  18. </view>
  19. <u-line color="#d4d4d4" length="50"></u-line>
  20. </view>
  21. </template>
  22. <script>
  23. /**
  24. * loadmore 加载更多
  25. * @description 此组件一般用于标识页面底部加载数据时的状态。
  26. * @tutorial https://www.uviewui.com/components/loadMore.html
  27. * @property {String} status 组件状态(默认loadmore)
  28. * @property {String} bg-color 组件背景颜色,在页面是非白色时会用到(默认#ffffff)
  29. * @property {Boolean} icon 加载中时是否显示图标(默认true)
  30. * @property {String} icon-type 加载中时的图标类型(默认circle)
  31. * @property {String} icon-color icon-type为circle时有效,加载中的动画图标的颜色(默认#b7b7b7)
  32. * @property {Boolean} is-dot status为nomore时,内容显示为一个"●"(默认false)
  33. * @property {String} color 字体颜色(默认#606266)
  34. * @property {String Number} margin-top 到上一个相邻元素的距离
  35. * @property {String Number} margin-bottom 到下一个相邻元素的距离
  36. * @property {Object} load-text 自定义显示的文字,见上方说明示例
  37. * @event {Function} loadmore status为loadmore时,点击组件会发出此事件
  38. * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
  39. */
  40. export default {
  41. name: "u-loadmore",
  42. props: {
  43. //当前页面背景颜色,如果背景为非白色的时候,需要把此值设置为背景的颜色
  44. bgColor: {
  45. type: String,
  46. default: 'transparent'
  47. },
  48. // 是否显示加载中的图标
  49. icon: {
  50. type: Boolean,
  51. default: true
  52. },
  53. // 字体大小
  54. fontSize: {
  55. type: String,
  56. default: '28'
  57. },
  58. // 字体颜色
  59. color: {
  60. type: String,
  61. default: '#606266'
  62. },
  63. // 组件状态,loadmore-加载前的状态,loading-加载中的状态,nomore-没有更多的状态
  64. status: {
  65. type: String,
  66. default: 'loadmore'
  67. },
  68. // 加载中状态的图标,flower-花朵状图标,circle-圆圈状图标
  69. iconType: {
  70. type: String,
  71. default: 'circle'
  72. },
  73. // 显示的文字
  74. loadText: {
  75. type: Object,
  76. default () {
  77. return {
  78. loadmore: '加载更多',
  79. loading: '正在加载...',
  80. nomore: '没有更多了'
  81. }
  82. }
  83. },
  84. // 在“没有更多”状态下,是否显示粗点
  85. isDot: {
  86. type: Boolean,
  87. default: false
  88. },
  89. // 加载中显示圆圈动画时,动画的颜色
  90. iconColor: {
  91. type: String,
  92. default: '#b7b7b7'
  93. },
  94. // 上边距
  95. marginTop: {
  96. type: [String, Number],
  97. default: 0
  98. },
  99. // 下边距
  100. marginBottom: {
  101. type: [String, Number],
  102. default: 0
  103. },
  104. // 高度,单位rpx
  105. height: {
  106. type: [String, Number],
  107. default: 'auto'
  108. }
  109. },
  110. data() {
  111. return {
  112. // 粗点
  113. dotText: "●"
  114. }
  115. },
  116. computed: {
  117. // 加载的文字显示的样式
  118. loadTextStyle() {
  119. return {
  120. color: this.color,
  121. fontSize: this.fontSize + 'rpx',
  122. position: 'relative',
  123. zIndex: 1,
  124. backgroundColor: this.bgColor,
  125. // 如果是加载中状态,动画和文字需要距离近一点
  126. }
  127. },
  128. // 加载中圆圈动画的样式
  129. cricleStyle() {
  130. return {
  131. borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.circleColor}`
  132. }
  133. },
  134. // 加载中花朵动画形式
  135. // 动画由base64图片生成,暂不支持修改
  136. flowerStyle() {
  137. return {
  138. }
  139. },
  140. // 显示的提示文字
  141. showText() {
  142. let text = '';
  143. if(this.status == 'loadmore') text = this.loadText.loadmore;
  144. else if(this.status == 'loading') text = this.loadText.loading;
  145. else if(this.status == 'nomore' && this.isDot) text = this.dotText;
  146. else text = this.loadText.nomore;
  147. return text;
  148. }
  149. },
  150. methods: {
  151. loadMore() {
  152. // 只有在“加载更多”的状态下才发送点击事件,内容不满一屏时无法触发底部上拉事件,所以需要点击来触发
  153. if(this.status == 'loadmore') this.$emit('loadmore');
  154. }
  155. }
  156. }
  157. </script>
  158. <style scoped lang="scss">
  159. @import "../../libs/css/style.components.scss";
  160. /* #ifdef MP */
  161. // 在mp.scss中,赋予了u-line为flex: 1,这里需要一个明确的长度,所以重置掉它
  162. // 在组件内部,把组件名(u-line)当做选择器,在微信开发工具会提示不合法,但不影响使用
  163. u-line {
  164. flex: none;
  165. }
  166. /* #endif */
  167. .u-load-more-wrap {
  168. @include vue-flex;
  169. justify-content: center;
  170. align-items: center;
  171. }
  172. .u-load-more-inner {
  173. @include vue-flex;
  174. justify-content: center;
  175. align-items: center;
  176. padding: 0 12rpx;
  177. }
  178. .u-more {
  179. position: relative;
  180. @include vue-flex;
  181. justify-content: center;
  182. }
  183. .u-dot-text {
  184. font-size: 28rpx;
  185. }
  186. .u-loadmore-icon-wrap {
  187. margin-right: 8rpx;
  188. }
  189. .u-loadmore-icon {
  190. @include vue-flex;
  191. align-items: center;
  192. justify-content: center;
  193. }
  194. </style>