微信小程序骨架屏的实现示例

目录

为了优化用户体验，骨架屏一直是开发者比较喜欢的表https://www.easck.com/现方式，也就是首屏占位的一种表现方式，不会让浏览者因为长时间的等待而焦躁。小程序中骨架屏的实现还是比较简单的，但是没用过的同学难免会误入歧途，今天就分享一下小程序中骨架屏的实现。x:if="{{loading}}" data="{{}}"/>

/* pages/index/index.wxss 中引入样式 */@import "index.skeleton.wxss";

显示与隐藏

与普通的模板相同，通过 wx:if 控制显示隐藏。
可以设置延迟加载，或者在页面所有数据请求成功之后隐藏骨架屏。
延迟加载的代码放在 onLoad 生命周期中，代码如下：

   // 渐进式加载数据，逐步隐藏 loading  progressiveLoad() {    setTimeout(() => {      this.setData({        loading: false      })    }, 1000)  },  onLoad() {    this.progressiveLoad()  // 渐进式加载数据，逐步隐藏 loading  }

开发者还可以根据需要设置文字、图片、按钮的颜色和形状，同时可根据 excludes、remove、hide等忽视或隐藏部分页面元素，以获取更优的展示效果。具体配置见骨架屏官方文档