You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

199 lines
5.9 KiB

3 years ago
  1. <template>
  2. <view v-if="loading" :style="{
  3. width: windowWinth + 'px',
  4. height: windowHeight + 'px',
  5. backgroundColor: bgColor,
  6. position: 'absolute',
  7. left: left + 'px',
  8. top: top + 'px',
  9. zIndex: 9998,
  10. overflow: 'hidden'
  11. }"
  12. @touchmove.stop.prevent>
  13. <view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
  14. width: item.width + 'px',
  15. height: item.height + 'px',
  16. backgroundColor: elColor,
  17. position: 'absolute',
  18. left: (item.left - left) + 'px',
  19. top: (item.top - top) + 'px'
  20. }"></view>
  21. <view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
  22. width: item.width + 'px',
  23. height: item.height + 'px',
  24. backgroundColor: elColor,
  25. borderRadius: item.width/2 + 'px',
  26. position: 'absolute',
  27. left: (item.left - left) + 'px',
  28. top: (item.top - top) + 'px'
  29. }"></view>
  30. <view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
  31. width: item.width + 'px',
  32. height: item.height + 'px',
  33. backgroundColor: elColor,
  34. borderRadius: borderRadius + 'rpx',
  35. position: 'absolute',
  36. left: (item.left - left) + 'px',
  37. top: (item.top - top) + 'px'
  38. }"></view>
  39. </view>
  40. </template>
  41. <script>
  42. /**
  43. * skeleton 骨架屏
  44. * @description 骨架屏一般用于页面在请求远程数据尚未完成时页面用灰色块预显示本来的页面结构给用户更好的体验
  45. * @tutorial https://www.uviewui.com/components/skeleton.html
  46. * @property {String} el-color 骨架块状元素的背景颜色默认#e5e5e5
  47. * @property {String} bg-color 骨架组件背景颜色默认#ffffff
  48. * @property {Boolean} animation 骨架块是否显示动画效果默认false
  49. * @property {String Number} border-radius u-skeleton-fillet类名元素对应的骨架块的圆角大小单位rpx默认10
  50. * @property {Boolean} loading 是否显示骨架组件请求完成后将此值设置为false默认true
  51. * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
  52. */
  53. export default {
  54. name: "u-skeleton",
  55. props: {
  56. // 需要渲染的元素背景颜色,十六进制或者rgb等都可以
  57. elColor: {
  58. type: String,
  59. default: '#e5e5e5'
  60. },
  61. // 整个骨架屏页面的背景颜色
  62. bgColor: {
  63. type: String,
  64. default: '#ffffff'
  65. },
  66. // 是否显示加载动画
  67. animation: {
  68. type: Boolean,
  69. default: false
  70. },
  71. // 圆角值,只对类名为u-skeleton-fillet的元素生效,为数值,不带单位
  72. borderRadius: {
  73. type: [String, Number],
  74. default: "10"
  75. },
  76. // 是否显示骨架,true-显示,false-隐藏
  77. loading: {
  78. type: Boolean,
  79. default: true
  80. }
  81. },
  82. data() {
  83. return {
  84. windowWinth: 750, // 骨架屏宽度
  85. windowHeight: 1500, // 骨架屏高度
  86. filletNodes: [], // 圆角元素
  87. circleNodes: [], // 圆形元素
  88. RectNodes: [], // 矩形元素
  89. top: 0,
  90. left: 0,
  91. }
  92. },
  93. methods: {
  94. // 查询各节点的信息
  95. selecterQueryInfo() {
  96. // 获取整个父组件容器的高度,当做骨架屏的高度
  97. // 在微信小程序中,如果把骨架屏放入组件中使用的话,需要调in(this)上下文为父组件才有效
  98. let query = '';
  99. // #ifdef MP-WEIXIN
  100. query = uni.createSelectorQuery().in(this.$parent);
  101. // #endif
  102. // #ifndef MP-WEIXIN
  103. query = uni.createSelectorQuery()
  104. // #endif
  105. query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
  106. this.windowHeight = res[0][0].height;
  107. this.windowWinth = res[0][0].width;
  108. this.top = res[0][0].bottom - res[0][0].height;
  109. this.left = res[0][0].left;
  110. });
  111. // 矩形骨架元素
  112. this.getRectEls();
  113. // 圆形骨架元素
  114. this.getCircleEls();
  115. // 圆角骨架元素
  116. this.getFilletEls();
  117. },
  118. // 矩形元素列表
  119. getRectEls() {
  120. let query = '';
  121. // 在微信小程序中,如果把骨架屏放入组件中使用的话,需要调in(this)上下文为父组件才有效
  122. // #ifdef MP-WEIXIN
  123. query = uni.createSelectorQuery().in(this.$parent);
  124. // #endif
  125. // #ifndef MP-WEIXIN
  126. query = uni.createSelectorQuery()
  127. // #endif
  128. query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
  129. this.RectNodes = res[0];
  130. });
  131. },
  132. // 圆角元素列表
  133. getFilletEls() {
  134. let query = '';
  135. // 在微信小程序中,如果把骨架屏放入组件中使用的话,需要调in(this)上下文为父组件才有效
  136. // #ifdef MP-WEIXIN
  137. query = uni.createSelectorQuery().in(this.$parent);
  138. // #endif
  139. // #ifndef MP-WEIXIN
  140. query = uni.createSelectorQuery()
  141. // #endif
  142. query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
  143. this.filletNodes = res[0];
  144. });
  145. },
  146. // 圆形元素列表
  147. getCircleEls() {
  148. let query = '';
  149. // 在微信小程序中,如果把骨架屏放入组件中使用的话,需要调in(this)上下文为父组件才有效
  150. // #ifdef MP-WEIXIN
  151. query = uni.createSelectorQuery().in(this.$parent);
  152. // #endif
  153. // #ifndef MP-WEIXIN
  154. query = uni.createSelectorQuery()
  155. // #endif
  156. query.selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
  157. this.circleNodes = res[0];
  158. });
  159. }
  160. },
  161. // 组件被挂载
  162. mounted() {
  163. // 获取系统信息
  164. let systemInfo = uni.getSystemInfoSync();
  165. this.windowHeight = systemInfo.windowHeight;
  166. this.windowWinth = systemInfo.windowWidth;
  167. this.selecterQueryInfo();
  168. }
  169. }
  170. </script>
  171. <style lang="scss" scoped>
  172. @import "../../libs/css/style.components.scss";
  173. .skeleton-fade {
  174. width: 100%;
  175. height: 100%;
  176. background: rgb(194, 207, 214);
  177. animation-duration: 1.5s;
  178. animation-name: blink;
  179. animation-timing-function: ease-in-out;
  180. animation-iteration-count: infinite;
  181. }
  182. @keyframes blink {
  183. 0% {
  184. opacity: 1;
  185. }
  186. 50% {
  187. opacity: 0.4;
  188. }
  189. 100% {
  190. opacity: 1;
  191. }
  192. }
  193. </style>