小程序骨架屏（mpvue）

小程序骨架屏

1, 引入插件

<template>
  <div>
    <div class="wrap"
         :style="{'width':systemInfo.width+'px','height':systemInfo.height+'px', 'background-color':bgcolor}">
      <div v-for="(item,index) in skeletonRectLists"
           :index='index'
           :key='item'
           class="chiaroscuro"
           :class="loading=='chiaroscuro'? 'chiaroscuro':''"
           :style="{'width':item.width+'px','height':item.height+'px','background-color':'rgba(233, 2, 233,1)','position':'absolute','left':item.left+'px','top':item.top+'px'}">
      </div>
      <div v-for="(item,index) in skeletonCircleLists"
           :index='index'
           :key='item'
           class="chiaroscuro"
           :class="loading == 'chiaroscuro' ? 'chiaroscuro' : ''"
           :style="{'width':item.width+'px','height':item.height+'px','background-color':'rgba(233, , 233,1)','border-radius':item.width+'px','position':'absolute','left':item.left+'px','top':item.top+'px'}">
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  props: {
    bgcolor: { type: String, value: '#FFF' },
    selector: { type: String, value: 'skeleton' },
    loading: { type: String, value: 'spin' },
  },

  data() {
    return {
      loadingAni: ['spin', 'chiaroscuro'],
      systemInfo: {},
      skeletonRectLists: [],
      skeletonCircleLists: [],
    };
  },

  components: {},

  methods: {
    rectHandle: function() {
      const that = this;
      //繪制不帶樣式的節點
      wx
        .createSelectorQuery()
        .selectAll(`.${this.selector}-rect`)
        .boundingClientRect()
        .exec(function(res) {
          that.skeletonRectLists = res[0];
        });
    },

    radiusHandle: function() {
      const that = this;
      wx
        .createSelectorQuery()
        .selectAll(`.${this.selector}-radius`)
        .boundingClientRect()
        .exec(function(res) {
          that.skeletonCircleLists = res[0];
        });
    },
  },

  onLoad: function() {
    //默認的首屏寬高，防止內容閃現
    const systemInfo = wx.getSystemInfoSync();
    (this.systemInfo = {
      width: systemInfo.windowWidth,
      height: systemInfo.windowHeight,
    }),
      (this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin');
    const that = this;
    //繪制背景
    wx
      .createSelectorQuery()
      .selectAll(`.${this.selector}`)
      .boundingClientRect()
      .exec(function(res) {
        that.systemInfo.height = res[0][0].height + res[0][0].top || 0;
      });

    //繪制矩形
    this.rectHandle();

    //繪制圓形
    this.radiusHandle();
  },
};
/* eslint-enable */
</script>

<style scoped>
.wrap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9998;
  overflow: hidden;
}
.chiaroscuro {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 40px;
  position: relative;
}
@keyframes placeHolderShimmer{
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}
</style>

2, 使用方式

1, 引入組建后, template 標簽內加入
<skeleton selector="skeleton" bgcolor="#FFF" v-if="showSkeleton"></skeleton>

• 其中 v-if="showSkeleton" 為顯示骨架屏顯示的參數。

2, data對象中設置showSkeleton: true // 默認一開始進入頁面加載骨架屏內容。

• 骨架屏渲染形狀有兩種：矩形 & 圓形
• 在想顯示骨架屏的區域的父級標簽的 class 加入 skeleton 表示該class下的內容進行骨架屏元素加載
• 需要渲染矩形，則在該元素上的class加入skeleton-rect
• 需要圓形矩形，則在該元素上的class加入skeleton-radius

3, 渲染數據。

• 渲染骨架屏的元素，需要先填充元素。使vue能夠根據數據的長度進行渲染。
• 列表類數據 字段值可為空。例如：

dataList: [
	{
		title: '',
		author: '',
		pubTime: '',
		avatar: ''
	},
	{
		title: '',
		author: '',
		pubTime: '',
		avatar: ''
	}
]

• 此時會渲染兩條數據內容

4，關閉骨架屏效果

• 待數據請求到本地后，將showSkeleton = false 即可。否則骨架屏層級過高（當然也可更改插件的z-index: 9998;）。數據視圖將被覆蓋