uniapp 跨平台开发

uniapp的骨架屏生成指南

骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。使用到的API有uni.createSelectorQuery()uni.getSystemInfoSync()。

常规首页的布局

一般而言，我们的首页的基础布局是包含的有：顶部搜索、轮播、金刚区、新闻简报、活动魔方。

<template>
    <view class="content">
        <!-- 顶部搜索 -->
        <headerSerch></headerSerch>
        <!-- 轮播 -->
        <swiperBg></swiperBg>
        <!-- 金刚区 -->
        <menus></menus>
        <!-- 新闻简报 -->
        <news></news>
        <!-- 活动魔方 -->
        <activity></activity>
        <!-- 骨架屏 -->
        <skeleton :show="show"></skeleton>
    </view>
</template>

<script>
    import headerSerch from './components/headerSerch.vue'
    import swiperBg from './components/swiperBg.vue'
    import menus from './components/menus.vue'
    import news from './components/news.vue'
    import activity from './components/activity.vue'
    import skeleton from './components/skeleton.vue'
    export default {
        components: {
            headerSerch,
            swiperBg,
            menus,
            news,
            activity,
            skeleton
        },
        data() {
            return {
                show: true
            }
        },
        mounted() {
            setTimeout(()=>{
                this.show = false
            },1200)
        }
    }
</script>

<style scoped>
    
</style>

skeleton组件的实现

代码如下，稍后给大家解释

步骤一设置骨架屏的基础样式

我们通过绝对定位的方式把组件的根元素提高层级，避免被父组件的其他组件覆盖掉。使用 uni.getSystemInfoSync()同步获取系统的可使用窗口宽度和可使用窗口高度并赋值给组件根元素的宽高。

<view :style="{
width: windowWidth,
height: windowHeight,
backgroundColor: bgColor,
position: 'absolute',
zIndex: 9999,
top: top,
left: left
}"> 
......
......
</view>

<script>
    let systemInfo = uni.getSystemInfoSync();
    export default {
        name: 'skeleton',
        props: {
            show: {
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                windowWidth: systemInfo.windowWidth + 'px',
                windowHeight: systemInfo.windowHeight + 'px',
                bgColor: '#fff',
                top: 0,
                left: 0,
            }
        }
     }
</script>

步骤二渲染出占位的灰色块

通过uniapp的uni.createSelectorQuery()接口，查询页面带有指定类名的元素的位置和尺寸，通过绝对定位的方式，用同样尺寸的灰色块定位到相同的位置。

在骨架屏中多数用的主要的矩形节点rectNodes 和圆形节点circleNodes。

首先给这些元素加上相同的skeleton-fade类，这个类的主要为了有一个灰色的背景并使用animate属性使其看到颜色的深浅变化。

按照官方的API使用说明，我们得在mounted 后进行调用方法。在uni.createSelectorQuery()的后面加in(this.$parent)在微信小程序才能生效，在H5端不用加也生效。（我们主要是获取指定元素的位置和高度详细并赋值给rectNodes、circleNodes，所以得到之后可以把这两个方法删掉。）

mounted() {
    // 矩形骨架元素
    this.getRectEls();
    // 圆形骨架元素
    this.getCircleEls();
},

methods: {
    getRectEls() {
        let query = uni.createSelectorQuery().in(this.$parent)
        query.selectAll('.skeleton-rect').boundingClientRect(res => {
                console.log('rect', JSON.stringify(res));
        }).exec(function() {

        })
    },
    getCircleEls() {
        let query = uni.createSelectorQuery().in(this.$parent)
        query.selectAll('.skeleton-circle').boundingClientRect(res => {
                console.log('circle', JSON.stringify(res));
        }).exec(function() {

        })
    }
},