微信小程序实战之骨架屏的应用与实现

简介: 我们打开一个应用后,应用会通过ajax来请求数据,而在这段空缺的时间,没有数据,内容缺失,这对于用户的感觉很不好,所以我们需要在这个时间段内通过骨架屏来填充这个空缺。

微信小程序骨架屏的应用与实现步骤

什么是骨架屏

骨架屏是作为一种首次渲染加载优化的一种方法

我们打开一个应用后,应用会通过ajax来请求数据,而在这段空缺的时间,没有数据,内容缺失,这对于用户的感觉很不好,所以我们需要在这个时间段内通过骨架屏来填充这个空缺。

1.webp.jpg

如上图所示,一个是没有内容,一个是骨架屏的填充,所以在加载的这一秒内给用户以骨架屏形式的填充是很有必要的。

小程序骨架屏的实现

1. 生成页面骨架

微信小程序开发者工具提供了生成骨架屏的工具,所以我们可以快速高效得实现加载骨架屏

1.webp.jpg

点击三个点,生成骨架屏,即可在对应page文件下生成两个文件,文件中包括了骨架屏的使用方式。

1.webp.jpg

2. 骨架屏的应用

工具生成的骨架屏文件中包含了使用方式,下面我拿person目录举例。

  1. 在person.wxml的头部加入下面的代码(该代码在生成的文件中的注释有提示)
<import src="person.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
复制代码
  1. 在person.wxss的头部引入下面的代码,当然在生成的文件注释里也有相关提示
@import "./person.skeleton.wxss";
复制代码
  1. 在请求的回调函数中进行骨架屏的控制
var set = setInterval(function () {
    clearInterval(set);
    that.setData({
        loading: false, //停止骨架屏
    })
}, 1000)
复制代码

3. 使用注意

  1. 页面更改后可以骨架屏随时更新,随时替换,很方便。
  2. 在使用的过程中经常会遇到元素被提前加载出的情况所以我们需要为真实的页面元素使用wx:if来和骨架屏进行反向操作,可以避免元素加载后出现与骨架屏重叠的现象。
<template is="skeleton" wx:if="{{loading}}" />
<Header  customTitle="个人中心"></Header>
<view class="head" wx:if="{{!isLogin&&!loading}}" bindtap="login">
<image src="../../images/{{season}}-people.png" class="head-img"></image>
<view class="head-name">点击登录</view>
</view>
复制代码

4. 思考后的封装

骨架屏加载函数,我们每个页面都需要进行调用,在我写完一座xx山后意思到了这件事情,出现了这种情况

1.webp.jpg

好了,我们改过自新

  1. 在utils文件下封装一个骨架屏加载方法
const loadScreen = (that,time) => {
    var set = setInterval(function () {
        clearInterval(set);
        that.setData({
            loading: false, //停止骨架屏
            hidden:false
        })
    }, time)
}
复制代码
  1. 在使用页面引入
let util = require('../../utils/util.js')
复制代码
  1. 直接调用
let that =this;
util.loadScreen(that,1500)
复制代码

最后

掘友们有更好的想法可以在评论区留言,我会改造我写的xxx山


目录
打赏
0
0
0
0
69
分享
相关文章
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
142 2
10 分钟构建 AI 客服并应用到网站、钉钉或微信中简说
10 分钟构建 AI 客服并应用到网站、钉钉或微信
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手,综合运用各种优化手段。通过不断地优化和改进,能够显著提升小程序的性能,为用户带来更流畅、更高效的使用体验。
82 3
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
143 0
10 分钟构建 AI 客服并应用到网站、钉钉或微信中
《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案通过详尽的文档和示例代码,使具有一定编程基础的用户能够快速上手,顺利完成AI客服集成。方案涵盖高可用性、负载均衡及定制化选项,满足生产环境需求。然而,若文档不清晰或存在信息缺失,则可能导致部署障碍。实际部署中可能遇到网络、权限等问题,需逐一排查。云产品的功能、性能及操作配置便捷性直接影响解决方案效果,详尽的产品手册有助于快速解决问题。总体而言,该方案在各方面表现出色,值得推荐。
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
84 5
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
661 0
浅谈提高微信小程序的应用速度
浅谈提高微信小程序的应用速度
ISO钉钉小程序小程序webview打开nextjs应用异常
ISO钉钉小程序小程序webview打开nextjs应用异常
72 3
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等