什么是骨架屏?

api接口加载是有延时的,未加载前屏幕会有大片空白或错位现象。为了优化呈现效果,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。这种类似原型图的展示效果被称为骨架屏。

 

微信小程序骨架屏制作

1、一键生成骨架屏

打开微信开发者工具,切换到待生成骨架屏的页面,点击模拟器面板右下角三点处,在列表选择“生成骨架屏”。

生成之后会多出两个文件。

2、引入骨架屏

当页面未加载完 isload=0;当页面加载完 isload=1:

index.wxml

<import src=”index.skeleton.wxml”>

<template is=”skeleton” wx:if=”{{isload}}”>

index.wxss

@import “./index.skeleton.wxss”;

index.js

data:{

isload:0,

},

onLoad(){

api远程调用 (function(){

this.setData({isload:1});

})

}

 

 

 

作者 admin

百度广告效果展示