uni-app、百度小程序、微信小程序、骨架屏

最近用uni-app做了一款《中国好故事》百度小程序、h5、微信小程序三个版本，正在上线阶段，

所以有时间最近总结一下遇到的问题

百度小程序白屏总是拒绝审核通过，所以新学习了一下骨架屏，看了众多资料，总结就是一句话：
copy一份与数据展示页（以下称为真实页面）全等的一个静态页面（以下称为复制页面）。

ps：当然复制页面中的内容框的宽高和位置可以动态的从真实页面获取，但这个时间节点是真实页面加载数据展示之前，以此来替换白屏，使用复制页面去等待数据加载的过程。

难点：复制页的布局与获取宽高的问题。

上代码：

引入组件  ：

import Skeleton from '@/components/skeleton/index.vue'

页面引入组件：

<skeleton
          :loading="loading"
          :avatarSize="skeleton1.avatarSize"
          :row="skeleton1.row"
            :showAvatar="skeleton1.showAvatar"
          :showTitle="skeleton1.showTitle"
    ></skeleton>

 

data{

  skeleton1: {
        avatarSize: '52px',
        row: 1,
        showAvatar: true,
        showTitle: false,
      },

}

该组件内容：

<template>
  <view class="">    
    <view class="aaa">
        <view class="uni-swiper-tab" v-if="loading">
            <view class="uni-scroll-view">
                <view class="swiper-tab-list" v-for="(item, index) in headList" :key="index">
                    
                </view>
            </view>
        </view>
        
        <view v-if="loading" class="" v-for="(item, index) in boxList" :key="index" >
            <view v-if="loading" class="skeleton" :class="{ animate: animate }">
              <view
                v-if="showAvatar"
                class="skeleton-avatar"
                :class="[avatarShape]"
                :style="{ width: avatarSize, height: avatarSize }"
              >
              </view>
              
              
            <view class="skeleton-content">
                <view v-if="showTitle" class="skeleton-title" :style="{ width: titleWidth }"></view>
                <view class="skeleton-rows">
                  <view class="skeleton-row-item"  v-for="(item, index) in rowList" :key="index" :style="{ width: item.width }">
                    <view class="media-title">
                    </view>
                    <view class="media-foot"  >
                    </view>
                  </view>
            </view>
                
                
              </view>
            </view>
            <view v-else><slot></slot></view>
        </view>
    </view>
     
    
  </view>
</template>

<script>
const DEFAULT_ROW_WIDTH = '100%'
const DEFAULT_LAST_ROW_WIDTH = '30%'

export default {
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
    showAvatar: {
      type: Boolean,
      default: true,
    },
    avatarSize: {
      type: String,
      default: '50px',
    },
    avatarShape: {
      type: String,
      default: 'round', // square | round
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    titleWidth: {
      type: String,
      default: '40%',
    },
    row: {
      type: Number,
      default: 3,
    },
    animate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
        boxList:['1','2','3'],
        headList:['1','2','3','4','5']
    }
  },
  methods: {
    // rowList: function () {
    
    //    let list = []
    //    for (let i = 0; i < this.row; i++) {
    //      list.push({
    //        width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH,
    //      })
    //    }
    //    return list
    
    //   }
  },
  onLoad() {
      console.log(rowList)
  },
  computed: {
    rowList() {
      let list = []
      for (let i = 0; i < this.row; i++) {
        list.push({
          width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH,
        })
      }
          console.log(list)
      return list
    },
  },
}
</script>

<style scoped>

/*  #ifdef  H5  */
.aaa{
    position: absolute;
    top:40px;
    z-index: 9999999;

}
/*  #endif  */
/*  #ifdef  MP  */
.aaa{
    position: absolute;
    top:-10px;
    z-index: 9999999;

}
/*  #endif  */

.skeleton {
  /* display: flex; */
  /* padding: 16px; */
  --bg-color: #f2f3f5;
  --row-height: 16px;
  --row-margin-top: 16px;
  padding-bottom: 10px;
}
.skeleton-avatar {
  flex-shrink: 0;
  
  margin-right: 8px;
}
.skeleton-avatar.round {
  /* border-radius: 50%; */
      /* position: absolute; */
      /* left: 50%; */
      width: 80%!important;
      height: 230px!important;
      /* margin-left: 50%;
      -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
      transform: translate(-50%); */
      border-radius: 5px;
      margin-bottom: 10px;
      margin-top: 10px;
      /* padding:0px 15px; */
      background: var(--bg-color);
}

.skeleton-content {
  width: 100%;
}

.skeleton-title {
  background-color: var(--bg-color);
  height: var(--row-height);
}

.skeleton-title + .skeleton-rows {
  margin-top: var(--row-margin-top);
}

.skeleton-row-item {
  /* background-color: var(--bg-color); */
  height: 46px;
}
.skeleton-row-item:not(:first-child) {
  margin-top: var(--row-margin-top);
}

.skeleton.animate {
  /* animation: skeleton-blink 1.2s ease-in-out infinite; */
}

@keyframes skeleton-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.skeleton-row-item{
    width: 100%;
}
.media-foot{
    width: 30%;
    margin-top: 5px;
    height: 16px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-right: 8px;
            color: #989898;
            font-size: 12px;
            background: var(--bg-color);
}
.media-title{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    width: 100%;
    height: 24px;
    text-overflow: ellipsis;
        font-size: 18px;
        color: #212121;
        line-height: 26px;
        font-weight: 700;
        background: var(--bg-color);
}
.uni-scroll-view{
    position: relative;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        height: 50px;
        max-height: inherit;
}

.uni-swiper-tab{
    width: 100%;
        white-space: nowrap;
        line-height: 50px;
        height: 50px;
        /* border-top: 0.5px solid #e8e8e8;     */
        padding-top: 2px;
        background: #fff;
        z-index: 999;
        top: var(--window-top);
        left: 0;
}
.swiper-tab-list{
    width: 136upx;
    height: 50px;
    font-size: 17px;
    display: inline-block;
    text-align: center;
    color: #444;
    font-weight: 400;
    margin: 0 32upx;
    background: #f2f3f5;
    padding: 0px;
}

</style>