微信骨架屏

微信小程序骨架屏文档

1、生成相应骨架屏文件

点击自动生成按钮



点击了确定后会自动生成两个文件，然后在文件中引入：

在 ...\mooc-home-work\pages\home\home.wxml 引入模板
<import src="home.skeleton.wxml"/>
<template is="skeleton" wx-if="{
    
    {loading}}" />
注意：自动生成的wx-if有错误，需要修改成wx:if

在 ...mooc-home-work\pages\home\home.wxss 中引入样式
@import "./home.skeleton.wxss";

2、控制加载时机

在home.js文件中

Page({
    
    
    data: {
    
    
        ...
        loading:true //是否加载骨架屏，这里的loading对应的是上文中的wx-if="{
    
    {loading}}"
    },
    onLoad:async function (options) {
    
    
        await this._getServiceList()
        await this._getCategoryList()
        this.setData({
    
    
            loading:false //数据加载结束后，隐藏骨架屏
        })
    },

需要生成骨架屏的页面

生成后的骨架屏

生成后的骨架屏，你会发现标记红色框框的地方没有生成，这个是微信开发工具的一个小Bug，swiper标签的没有生成。
我们可以先将没有生成的代码注释了，替换成一些简单的View,然后生成后在将原来的代码取消注释。

<import src="home.skeleton.wxml"/>
<template is="skeleton" wx:if="{
     
     {loading}}" />
<view class="container">
    <i-tabs tabs="{
     
     {tabs}}" bind:change="handleTabChange">
        <view slot="extend">
            <view class="category">
                <image style="width:80%;height:200rpx"></image>
<!--                <swiper style="height:150rpx" display-multiple-items="{
    
    {2}}" next-margin="60rpx">-->
                <!--                    <swiper-item wx:for="{
    
    {categoryList}}"-->
                <!--                                 wx:key="index"-->
                <!--                                 bind:tap="handleCategoryChange"-->
                <!--                                 data-id="{
    
    {item.id}}">-->
                <!--                        <view class="category-swiper-item">-->
                <!--                            <text class="category-name">{
    
    {item.name}}</text>-->
                <!--                        </view>-->
                <!--                    </swiper-item>-->
                <!--                </swiper>-->
            </view>
        </view>
        <view slot="panel">
            <view wx:for="{
     
     {serviceList}}" wx:key="index">
                <i-service-preview service_item="{
     
     {item}}"></i-service-preview>
            </view>
        </view>
    </i-tabs>

</view>

然后重新生成骨架屏

生成骨架屏后，把代码恢复原样

<import src="home.skeleton.wxml"/>
<template is="skeleton" wx:if="{
     
     {loading}}" />
<view class="container">
    <i-tabs tabs="{
     
     {tabs}}" bind:change="handleTabChange">
        <view slot="extend">
            <view class="category">
                <swiper style="height:150rpx" display-multiple-items="{
     
     {2}}" next-margin="60rpx">
                    <swiper-item wx:for="{
     
     {categoryList}}"
                                 wx:key="index"
                                 bind:tap="handleCategoryChange"
                                 data-id="{
     
     {item.id}}">
                        <view class="category-swiper-item">
                            <text class="category-name">{
   
   {item.name}}</text>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view slot="panel">
            <view wx:for="{
     
     {serviceList}}" wx:key="index">
                <i-service-preview service_item="{
     
     {item}}"></i-service-preview>
            </view>
        </view>
    </i-tabs>

</view>