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>