25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-loadmore.vue 5.3 KiB

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