骨架屏也是优化的一个重要环节，如若遇到网络不佳时，接口数据返回的比较慢，然后再渲染页面，页面会有空白的情况，那么骨架凭无疑是一个不错的解决方案. 看了插件市场的案例，进行的修改调整.

方案

市场上有这么几种解决方案

  1.   - UI给定每个页面的骨架屏图片
  2.      - 缺点：ui那里比较耗时间
  3.   - 前端根据页面进行页面股价进行css绘制
  4.      - 前端这里比较耗时间
  5.   - 根据dom节点进行绘制
  6.      - 一次组件封装，可重复调用

思路

等待页面HTML加载完成，获取页面的dom节点信息，进行绘制展示骨架屏组件，接口数据请求完成，隐藏骨架屏，渲染页面.
那么dom节点如何获取？
在每个节点上定义个类名，获取该元素节点信息即可。
Uniapp 骨架屏 - 图1

skeleton组件

  1. <template>
  2.     <view
  3.         v-if="show"
  4.         :style="{
  5.             width: systemInfo.width + 'px',
  6.             height: systemInfo.height + 'px',
  7.             backgroundColor: bgcolor,
  8.             position: 'absolute',
  9.             left: 0,
  10.             top: 0,
  11.             zIndex: 9998,
  12.             overflow: 'hidden'
  13.         }"
  14.     >
  15.         <view
  16.             v-for="(item, rect_idx) in skeletonRectLists"
  17.             :key="rect_idx + 'rect'"
  18.             :class="[loading == 'chiaroscuro' ? 'chiaroscuro' : '']"
  19.             :style="{
  20.                 width: item.width + 'px',
  21.                 height: item.height + 'px',
  22.                 backgroundColor: skebgcolor,
  23.                 position: 'absolute',
  24.                 left: item.left + 'px',
  25.                 top: item.top + 'px'
  26.             }"
  27.         ></view>
  28.         <view
  29.             v-for="(item, circle_idx) in skeletonCircleLists"
  30.             :key="circle_idx + 'circle'"
  31.             :class="loading == 'chiaroscuro' ? 'chiaroscuro' : ''"
  32.             :style="{
  33.                 width: item.width + 'px',
  34.                 height: item.height + 'px',
  35.                 backgroundColor: skebgcolor,
  36.                 borderRadius: item.width + 'px',
  37.                 position: 'absolute',
  38.                 left: item.left + 'px',
  39.                 top: item.top + 'px'
  40.             }"
  41.         ></view>
  42.         <view class="spinbox" v-if="loading == 'spin'"><view class="spin"></view></view>
  43.     </view>
  44. </template>
  46. <script>
  47. export default {
  48.     name: 'skeleton',
  49.     props: {
  50.        //骨架屏背景色
  51.         bgcolor: {
  52.             type: String,
  53.             value: '#FFF'
  54.         },
  55.     //绘制形状
  56.         selector: {
  57.             type: String,
  58.             value: 'skeleton'
  59.         },
  60.     //是否显示loading
  61.         loading: {
  62.             type: String,
  63.             value: 'spin'
  64.         },
  65.     //是否显示骨架屏组件
  66.         show: {
  67.             type: Boolean,
  68.             value: false
  69.         },
  70.     //发生变化就开始获取don节点信息
  71.         isNodes: {
  72.             type: Number,
  73.             value: false
  74.         },
  75.     //绘制形状背景
  76.         skebgcolor: {
  77.             type: String,
  78.             default: 'rgb(194, 207, 214)'
  79.         }
  80.     },
  81.     data() {
  82.         return {
  83.             loadingAni: ['spin', 'chiaroscuro'],
  84.             systemInfo: {},
  85.             skeletonRectLists: [],
  86.             skeletonCircleLists: []
  87.         };
  88.     },
  89.     watch: {
  90.         isNodes(val) {
  91.             this.readyAction();
  92.         }
  93.     },
  94.     mounted() {
  95.         this.attachedAction();
  96.     },
  97.     methods: {
  98.         attachedAction () {
  99.             //默认的首屏宽高，防止内容闪现
  100.             const systemInfo = uni.getSystemInfoSync();
  101.             this.systemInfo = {
  102.                 width: systemInfo.windowWidth,
  103.                 height: systemInfo.windowHeight
  104.             };
  105.             this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin';
  106.         },
  107.         readyAction () {
  108.             console.log('子组件readyAction');
  109.             const that = this;
  110.             //绘制背景
  111.             uni.createSelectorQuery()
  112.                 .selectAll(`.${this.selector}`)
  113.                 .boundingClientRect()
  114.                 .exec(function(res) {
  115.                     that.systemInfo.height = res[0][0].height + res[0][0].top;
  116.                 });
  118.             //绘制矩形
  119.             this.rectHandle();
  121.             //绘制圆形
  122.             this.radiusHandle();
  123.         },
  124.         rectHandle () {
  125.             const that = this;
  127.             //绘制不带样式的节点
  128.             uni.createSelectorQuery()
  129.                 .selectAll(`.${this.selector}-rect`)
  130.                 .boundingClientRect()
  131.                 .exec(function(res) {
  132.                     that.skeletonRectLists = res[0];
  133.                 });
  134.         },
  135.         radiusHandle() {
  136.             const that = this;
  138.             uni.createSelectorQuery()
  139.                 .selectAll(`.${this.selector}-radius`)
  140.                 .boundingClientRect()
  141.                 .exec(function(res) {
  142.                     that.skeletonCircleLists = res[0];
  143.                 });
  144.         }
  145.     }
  146. };
  147. </script>
  149. <style>
  150. .spinbox {
  151.     position: fixed;
  152.     display: flex;
  153.     justify-content: center;
  154.     align-items: center;
  155.     height: 100%;
  156.     width: 100%;
  157.     z-index: 9999;
  158. }
  159. .spin {
  160.     display: inline-block;
  161.     width: 64rpx;
  162.     height: 64rpx;
  163. }
  164. .spin:after {
  165.     content: ' ';
  166.     display: block;
  167.     width: 46rpx;
  168.     height: 46rpx;
  169.     margin: 1rpx;
  170.     border-radius: 50%;
  171.     border: 5rpx solid #409eff;
  172.     border-color: #409eff transparent #409eff transparent;
  173.     animation: spin 1.2s linear infinite;
  174. }
  175. @keyframes spin {
  176.     0% {
  177.         transform: rotate(0deg);
  178.     }
  179.     100% {
  180.         transform: rotate(360deg);
  181.     }
  182. }
  184. .chiaroscuro {
  185.     width: 100%;
  186.     height: 100%;
  187.     background: rgb(194, 207, 214);
  188.     animation-duration: 2s;
  189.     animation-name: blink;
  190.     animation-iteration-count: infinite;
  191. }
  193. @keyframes blink {
  194.     0% {
  195.         opacity: 0.4;
  196.     }
  197.     50% {
  198.         opacity: 1;
  199.     }
  200.     100% {
  201.         opacity: 0.4;
  202.     }
  203. }
  205. @keyframes flush {
  206.     0% {
  207.         left: -100%;
  208.     }
  209.     50% {
  210.         left: 0;
  211.     }
  212.     100% {
  213.         left: 100%;
  214.     }
  215. }
  216. .shine {
  217.     animation: flush 2s linear infinite;
  218.     position: absolute;
  219.     top: 0;
  220.     bottom: 0;
  221.     width: 100%;
  222.     background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
  223. }
  224. </style>

demo

wecom-temp-9b0f27679b1f37b19c7676aff3bf686f.jpg wecom-temp-4836d4f3d30a84674c6606acf8615265.jpg

  1. <template>
  2.     <view class="controller">
  3.         <view class="container skeleton" :style="{ visibility: showSkeleton ? 'hidden' : 'visible' }">
  4.             <view class="userinfo">
  5.                 <block>
  6.                     <!--skeleton-radius 绘制圆形-->
  7.                     <image class="userinfo-avatar skeleton-radius" :src="userInfo.avatarUrl" mode="cover"></image>
  8.                     <!--skeleton-rect 绘制矩形-->
  9.                     <text class="userinfo-nickname skeleton-rect">{{ userInfo.nickName }}</text>
  10.                 </block>
  11.             </view>
  12.             <view style="margin: 20px 0">
  13.                 <view v-for="(item, index) in lists" :key="index" class="lists">
  14.                     <text class="skeleton-rect">{{ item }}</text>
  15.                 </view>
  16.             </view>
  17.             <view class="__desc skeleton-rect">123</view>
  18.             <view class="__desc skeleton-rect">123</view>
  19.             <view class="__desc skeleton-rect">123</view>
  20.         </view>
  21.         <!--引用组件-->
  22.         <skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF" :skebgcolor="'rgb(194, 207, 214)'"></skeleton>
  23.     </view>
  24. </template>
  26. <script>
  27. import skeleton from '@/components/skeleton.vue';
  28. export default {
  29.     data() {
  30.         return {
  31.             userInfo: {
  32.                 avatarUrl: 'http://pic.wxhand.com/dev/student_image/d4305c73c610aa4f0841243c7455c76f',
  33.                 nickName: 'along'
  34.             },
  35.             lists:  ['第1行数据', '第2行数据', '第3行数据', '第4行数据', '第5行数据', '第6行数据'], //如果没有默认数据
  36.             showSkeleton: true, //骨架屏显示隐藏
  37.             isNodes: 0 //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
  38.         };
  39.     },
  40.     components: {
  41.         skeleton
  42.     },
  43.     onLoad () {
  44.         this.$nextTick(() => {
  45.             this.isNodes++;
  46.         })
  48.         setTimeout(() => {
  49.             this.showSkeleton = false;
  50.         }, 10000);
  51.     }
  52. };
  53. </script>
  55. <style>
  56. .container {
  57.     padding: 20rpx 60rpx;
  58. }
  59. .userinfo {
  60.     display: flex;
  61.     flex-direction: column;
  62.     align-items: center;
  63.     margin-top: 40rpx;
  64. }
  65. .userinfo-avatar {
  66.     width: 128rpx;
  67.     height: 128rpx;
  68.     margin: 20rpx;
  69.     border-radius: 50%;
  70. }
  71. .userinfo-nickname {
  72.     color: #aaa;
  73. }
  74. .usermotto {
  75.     margin-top: 200px;
  76. }
  77. .lists {
  78.     margin: 10px 0;
  79. }
  80. .list {
  81.     margin-right: 10px;
  82. }
  83. .__desc {
  84.     font-size: 24rpx;
  85.     margin-top: 10rpx;
  86. }
  87. </style>