u-skeleton.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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>