z-paging-load-more.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!-- [z-paging]上拉加载更多view -->
  2. <template>
  3. <view class="zp-l-container" :class="{'zp-l-container-rpx':c.unit==='rpx','zp-l-container-px':c.unit==='px'}" :style="[c.customStyle]" @click="doClick">
  4. <template v-if="!c.hideContent">
  5. <!-- 底部加载更多没有更多数据分割线 -->
  6. <text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" :class="{'zp-l-line-rpx':c.unit==='rpx','zp-l-line-px':c.unit==='px'}" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" />
  7. <!-- 底部加载更多loading -->
  8. <!-- #ifndef APP-NVUE -->
  9. <image v-if="finalStatus===M.Loading&&!!c.loadingIconCustomImage"
  10. :src="c.loadingIconCustomImage" :style="[c.iconCustomStyle]" :class="{'zp-l-line-loading-custom-image':true,'zp-l-line-loading-custom-image-animated':c.loadingAnimated,'zp-l-line-loading-custom-image-rpx':c.unit==='rpx','zp-l-line-loading-custom-image-px':c.unit==='px'}" />
  11. <image v-if="finalStatus===M.Loading&&finalLoadingIconType==='flower'&&!c.loadingIconCustomImage.length"
  12. :class="{'zp-line-loading-image':true,'zp-line-loading-image-rpx':c.unit==='rpx','zp-line-loading-image-px':c.unit==='px'}" :style="[c.iconCustomStyle]" :src="zTheme.flower[ts]" />
  13. <!-- #endif -->
  14. <!-- #ifdef APP-NVUE -->
  15. <!-- 在nvue中底部加载更多loading使用系统自带的 -->
  16. <view>
  17. <loading-indicator v-if="finalStatus===M.Loading&&finalLoadingIconType!=='circle'" :class="{'zp-line-loading-image-rpx':c.unit==='rpx','zp-line-loading-image-px':c.unit==='px'}" :style="[{color:zTheme.indicator[ts]}]" :animating="true" />
  18. </view>
  19. <!-- #endif -->
  20. <!-- 底部加载更多文字 -->
  21. <text v-if="finalStatus===M.Loading&&finalLoadingIconType==='circle'&&!c.loadingIconCustomImage.length"
  22. class="zp-l-circle-loading-view" :class="{'zp-l-circle-loading-view-rpx':c.unit==='rpx','zp-l-circle-loading-view-px':c.unit==='px'}" :style="[{borderColor:zTheme.circleBorder[ts],borderTopColor:zTheme.circleBorderTop[ts]},c.iconCustomStyle]" />
  23. <text v-if="!c.isChat||(!c.chatDefaultAsLoading&&finalStatus===M.Default)||finalStatus===M.Fail" :class="{'zp-l-text-rpx':c.unit==='rpx','zp-l-text-px':c.unit==='px'}" :style="[{color:zTheme.title[ts]},c.titleCustomStyle]">{{ownLoadingMoreText}}</text>
  24. <!-- 底部加载更多没有更多数据分割线 -->
  25. <text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" :class="{'zp-l-line-rpx':c.unit==='rpx','zp-l-line-px':c.unit==='px'}" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" />
  26. </template>
  27. </view>
  28. </template>
  29. <script>
  30. import zStatic from '../js/z-paging-static'
  31. import Enum from '../js/z-paging-enum'
  32. export default {
  33. name: 'z-paging-load-more',
  34. data() {
  35. return {
  36. M: Enum.More,
  37. zTheme: {
  38. title: { white: '#efefef', black: '#a4a4a4' },
  39. line: { white: '#efefef', black: '#eeeeee' },
  40. circleBorder: { white: '#aaaaaa', black: '#c8c8c8' },
  41. circleBorderTop: { white: '#ffffff', black: '#444444' },
  42. flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower },
  43. indicator: { white: '#eeeeee', black: '#777777' }
  44. }
  45. };
  46. },
  47. props: ['zConfig'],
  48. computed: {
  49. ts() {
  50. return this.c.defaultThemeStyle;
  51. },
  52. // 底部加载更多配置
  53. c() {
  54. return this.zConfig || {};
  55. },
  56. // 底部加载更多文字
  57. ownLoadingMoreText() {
  58. const statusTextArr = [this.c.defaultText,this.c.loadingText,this.c.noMoreText,this.c.failText];
  59. return statusTextArr[this.finalStatus];
  60. },
  61. // 底部加载更多状态
  62. finalStatus() {
  63. if (this.c.defaultAsLoading && this.c.status === this.M.Default) return this.M.Loading;
  64. return this.c.status;
  65. },
  66. // 加载更多icon类型
  67. finalLoadingIconType() {
  68. // #ifdef APP-NVUE
  69. return 'flower';
  70. // #endif
  71. return this.c.loadingIconType;
  72. }
  73. },
  74. methods: {
  75. // 点击了加载更多
  76. doClick() {
  77. this.$emit('doClick');
  78. }
  79. }
  80. }
  81. </script>
  82. <style scoped>
  83. @import "../css/z-paging-static.css";
  84. .zp-l-container {
  85. /* #ifndef APP-NVUE */
  86. clear: both;
  87. display: flex;
  88. /* #endif */
  89. flex-direction: row;
  90. align-items: center;
  91. justify-content: center;
  92. }
  93. .zp-l-container-rpx {
  94. height: 80rpx;
  95. font-size: 27rpx;
  96. }
  97. .zp-l-container-px {
  98. height: 40px;
  99. font-size: 14px;
  100. }
  101. .zp-l-line-loading-custom-image {
  102. color: #a4a4a4;
  103. }
  104. .zp-l-line-loading-custom-image-rpx {
  105. margin-right: 8rpx;
  106. width: 28rpx;
  107. height: 28rpx;
  108. }
  109. .zp-l-line-loading-custom-image-px {
  110. margin-right: 4px;
  111. width: 14px;
  112. height: 14px;
  113. }
  114. .zp-l-line-loading-custom-image-animated{
  115. /* #ifndef APP-NVUE */
  116. animation: loading-circle 1s linear infinite;
  117. /* #endif */
  118. }
  119. .zp-l-circle-loading-view {
  120. border: 3rpx solid #dddddd;
  121. border-radius: 50%;
  122. /* #ifndef APP-NVUE */
  123. animation: loading-circle 1s linear infinite;
  124. /* #endif */
  125. /* #ifdef APP-NVUE */
  126. width: 30rpx;
  127. height: 30rpx;
  128. /* #endif */
  129. }
  130. .zp-l-circle-loading-view-rpx {
  131. margin-right: 8rpx;
  132. width: 23rpx;
  133. height: 23rpx;
  134. }
  135. .zp-l-circle-loading-view-px {
  136. margin-right: 4px;
  137. width: 12px;
  138. height: 12px;
  139. }
  140. .zp-l-text-rpx {
  141. font-size: 30rpx;
  142. margin: 0rpx 6rpx;
  143. }
  144. .zp-l-text-px {
  145. font-size: 15px;
  146. margin: 0px 3px;
  147. }
  148. .zp-l-line-rpx {
  149. height: 1px;
  150. width: 100rpx;
  151. margin: 0rpx 10rpx;
  152. }
  153. .zp-l-line-px {
  154. height: 1px;
  155. width: 50px;
  156. margin: 0rpx 5px;
  157. }
  158. /* #ifndef APP-NVUE */
  159. @keyframes loading-circle {
  160. 0% {
  161. -webkit-transform: rotate(0deg);
  162. transform: rotate(0deg);
  163. }
  164. 100% {
  165. -webkit-transform: rotate(360deg);
  166. transform: rotate(360deg);
  167. }
  168. }
  169. /* #endif */
  170. </style>