最近用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>
.aaa{ position: absolute; top:40px; z-index: 9999999;
} .aaa{ position: absolute; top:-10px; z-index: 9999999;
}
.skeleton { --bg-color: #f2f3f5; --row-height: 16px; --row-margin-top: 16px; padding-bottom: 10px; } .skeleton-avatar { flex-shrink: 0; margin-right: 8px; } .skeleton-avatar.round { width: 80%!important; height: 230px!important; border-radius: 5px; margin-bottom: 10px; margin-top: 10px; 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 { height: 46px; } .skeleton-row-item:not(:first-child) { margin-top: var(--row-margin-top); }
.skeleton.animate { }
@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; 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>