前置
- 代码片段
- @点我快速跳转
- 手动复制跳转:https://developers.weixin.qq.com/s/WOktHDm77mGj
知道hidden属性
- 为true显示,为false隐藏,类似于display:none
<view>
<text hidden="{
{true}}">我会被隐藏</text>
<text hidden="{
{false}}">我会被显示</text>
</view>
第一步:写好基本的html
- 写好的静态页面
- 分为三个部分,上,中,下
-
代码
- wxml
<view style="display: flex;flex-direction: column;height: 100vh;"> <!-- 前置了解下hidden --> <!-- <text hidden="{ {true}}">我会被隐藏</text> <text hidden="{ {false}}">我会被显示</text> --> <!-- 轮播图部分 --> <view class="swiper-part"> <swiper indicatorDots="{ {true}}"> <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item> <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item> <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item> <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item> </swiper> </view> <!-- 文字说明部分 --> <view class="text-part"> <view>大家好,我是梦洁和秋叶</view> <view>大家好,我是梦洁和秋叶</view> <view>大家好,我是梦洁和秋叶</view> <view>大家好,我是梦洁和秋叶</view> <view>大家好,我是梦洁和秋叶</view> <view>大家好,我是梦洁和秋叶</view> <view>大家好,我是梦洁和秋叶</view> <view>大家好,我是梦洁和秋叶</view> </view> <!-- 底部部分 --> <view class="bottom-part"> <image style="width: 100%;" src="https://dreamlove.top/img/favicon.png"/> </view> </view>- wxss
.swiper-part{ } .text-part{ /* 简单的设置下文字居中显示 */ flex: 1; text-align: center; display: flex; flex-flow: column nowrap; align-self: center; justify-content: center; } .bottom-part{ }
第二步:使用data-skeleton-hide指明骨架区域
- 由于我们分为了三个部分
"swiper-part"和"text-part"和bottom-part,我们这里就指明三个部分就可以
<!-- 轮播图部分 -->
<view class="swiper-part" data-skeleton-hide="swiperData"> ... </view>
<!-- 文字说明部分 -->
<view class="text-part" data-skeleton-hide="textData"> ... </view>
<!-- 底部部分 -->
<view class="bottom-part" data-skeleton-hide="bottomData"> ... </view>
- 代码(wxss未变动,所以不列出)
- wxml
<view style="display: flex;flex-direction: column;height: 100vh;">
<!-- 前置了解下hidden -->
<!-- <text hidden="{
{true}}">我会被隐藏</text>
<text hidden="{
{false}}">我会被显示</text> -->
<!-- 轮播图部分 -->
<view class="swiper-part" data-skeleton-hide="swiperData">
<swiper indicatorDots="{
{true}}">
<swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item>
<swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item>
<swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item>
<swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item>
</swiper>
</view>
<!-- 文字说明部分 -->
<view class="text-part" data-skeleton-hide="textData">
<view>大家好,我是梦洁和秋叶</view>
<view>大家好,我是梦洁和秋叶</view>
<view>大家好,我是梦洁和秋叶</view>
<view>大家好,我是梦洁和秋叶</view>
<view>大家好,我是梦洁和秋叶</view>
<view>大家好,我是梦洁和秋叶</view>
<view>大家好,我是梦洁和秋叶</view>
<view>大家好,我是梦洁和秋叶</view>
</view>
<!-- 底部部分 -->
<view class="bottom-part" data-skeleton-hide="bottomData">
<image style="width: 100%;" src="https://dreamlove.top/img/favicon.png"/>
</view>
</view>
-
这样子我们生成的骨架屏就有了区域,我们在
data-skeleton-hide传入的是字符串,不是变量 -
生成骨架屏代码长这个样子
- 所以我们传入的变量是控制骨架屏显示和隐藏的(注意不要弄混了)
<!-- 原 wxml 内容 -->
<view data-skeleton-hide="hideBlock1"></view>
<view data-skeleton-hide="hideBlock2"></view>
<!-- 骨架屏 wxml 内容 -->
<view hidden="{
{hideBlock1}}"></view>
<view hidden="{
{hideBlock2}}"></view>
第三步:生成骨架屏并创建各个部分显示/隐藏的变量
生成骨架屏
- 确认
- 生成后会默认展示下效果,这里就不纠结怎么样了
创建各个部分显示/隐藏的变量和一个总体loading变量
- 代码
// pages/skeletonDemo/skeletonDemo.js
Page({
data: {
swiperData:false,//顶部轮播图数据是否加载完成-默认false
textData:false,//中间文本数据是否加载完成-默认false
bottomData:false,//底部数据是否加载完成-默认false
loading:true,//数据是否还有没有加载的-默认true
},
})
第四步:使用骨架屏
引入骨架屏并在template当中使用data属性传入控制显示/隐藏的变量和总体loading变量
<!-- 引入骨架屏 -->
<import src="./skeletonDemo.skeleton" />
<!-- 传入创建好的控制骨架屏的变量名和总体loading -->
<template is="skeleton" wx:if="{
{loading}}" data="{
{swiperData,textData,bottomData}}"/>
//...下面是wxml内容部分,就隐藏不显示了
引入样式
- 添加
@import "./skeletonDemo.skeleton.wxss";即可引入
@import "./skeletonDemo.skeleton.wxss";
.swiper-part{
}
.text-part{
/* 简单的设置下文字居中显示 */
flex: 1;
text-align: center;
display: flex;
flex-flow: column nowrap;
align-self: center;
justify-content: center;
}
.bottom-part{
}
第五步:添加控制显示/隐藏的变量到页面内容
- 因为我们是默认显示骨架屏的,所以如果想要展示原本的内容,就取反就可以
<!-- 轮播图部分 -->
<view class="swiper-part" data-skeleton-hide="swiperData" hidden="{
{!swiperData}}"> ... </view>
<!-- 文字说明部分 -->
<view class="text-part" data-skeleton-hide="textData" hidden="{
{!textData}}"> ... </view>
<!-- 底部部分 -->
<view class="bottom-part" data-skeleton-hide="bottomData" hidden="{
{!bottomData}}"> ... </view>
最后和演示效果
- 其实已经完成了这样子,我们最后自己添加下延迟吧
- js文件
// pages/skeletonDemo/skeletonDemo.js
Page({
data: {
swiperData:false,//顶部轮播图数据是否加载完成-默认false
textData:false,//中间文本数据是否加载完成-默认false
bottomData:false,//底部数据是否加载完成-默认false
loading:true,//数据是否还有没有加载的-默认true
},
onLoad(){
setTimeout(() => {
this.setData({
swiperData:true,//顶部轮播图设置加载完成
})
},1000);
setTimeout(() => {
this.setData({
textData:true,//中间文本设置加载完成
})
},3000);
setTimeout(() => {
this.setData({
bottomData:true,//底部图片设置加载完成
loading:false,//数据全部加载完成,这样子骨架屏就可以隐藏了
})
},6000);
}
})
- 这样子就实现了渐进加载骨架屏效果
注意
-
更改骨架屏配置后需要重新生成骨架屏
-
如果需要
闪亮的效果,可以全局添加下方配置
"skeletonConfig": {
"global": {
"loading": "shine"
}
}