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

u-skeleton.vue 4.7 KiB

3 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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. uni.createSelectorQuery().selectAll('.u-skeleton').boundingClientRect().exec((res) => {
  98. this.windowHeight = res[0][0].height;
  99. this.windowWinth = res[0][0].width;
  100. this.top = res[0][0].bottom - res[0][0].height;
  101. this.left = res[0][0].left;
  102. });
  103. // 矩形骨架元素
  104. this.getRectEls();
  105. // 圆形骨架元素
  106. this.getCircleEls();
  107. // 圆角骨架元素
  108. this.getFilletEls();
  109. },
  110. // 矩形元素列表
  111. getRectEls() {
  112. uni.createSelectorQuery().selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
  113. this.RectNodes = res[0];
  114. });
  115. },
  116. // 圆角元素列表
  117. getFilletEls() {
  118. uni.createSelectorQuery().selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
  119. this.filletNodes = res[0];
  120. });
  121. },
  122. // 圆形元素列表
  123. getCircleEls() {
  124. uni.createSelectorQuery().selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
  125. this.circleNodes = res[0];
  126. });
  127. }
  128. },
  129. // 组件被挂载
  130. mounted() {
  131. // 获取系统信息
  132. let systemInfo = uni.getSystemInfoSync();
  133. this.windowHeight = systemInfo.windowHeight;
  134. this.windowWinth = systemInfo.windowWidth;
  135. this.selecterQueryInfo();
  136. }
  137. }
  138. </script>
  139. <style lang="scss" scoped>
  140. @import "../../libs/css/style.components.scss";
  141. .skeleton-fade {
  142. width: 100%;
  143. height: 100%;
  144. background: rgb(194, 207, 214);
  145. animation-duration: 1.5s;
  146. animation-name: blink;
  147. animation-timing-function: ease-in-out;
  148. animation-iteration-count: infinite;
  149. }
  150. @keyframes blink {
  151. 0% {
  152. opacity: 1;
  153. }
  154. 50% {
  155. opacity: 0.4;
  156. }
  157. 100% {
  158. opacity: 1;
  159. }
  160. }
  161. </style>