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

目录
  • 什么是骨架屏
  • 小程序骨架屏的实现
    • 1. 生成页面骨架
    • 2. 骨架屏的应用
    • 3. 使用注意
    • 4. 思考后的封装
  • 总结

什么是骨架屏

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

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

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

小程序骨架屏的实现

1. 生成页面骨架

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

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

2. 骨架屏的应用

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

  • 在person.wxml的头部加入下面的代码（该代码在生成的文件中的注释有提示）

    <import src="person.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
  • 在person.wxss的头部引入下面的代码，当然在生成的文件注释里也有相关提示

    @import "./person.skeleton.wxss";
  • 在请求的回调函数中进行骨架屏的控制

    var set = setInterval(function () {
    clearInterval(set);
    that.setData({
        loading: false, //停止骨架屏
    })
}, 1000)

3. 使用注意

  • 页面更改后可以骨架屏随时更新，随时替换，很方便。
  • 在使用的过程中经常会遇到元素被提前加载出的情况所以我们需要为真实的页面元素使用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山后意思到了这件事情，出现了这种情况

好了，我们改过自新

  • 在utils文件下封装一个骨架屏加载方法

        const loadScreen = (that,time) => {
    var set = setInterval(function () {
        clearInterval(set);
        that.setData({
            loading: false, //停止骨架屏
            hidden:false
        })
    }, time)
}
  • 在使用页面引入

    let util = require('../../utils/util.js')
  • 直接调用

    let that =this;
util.loadScreen(that,1500)

总结

到此这篇关于微信小程序骨架屏的应用与实现的文章就介绍到这了,更多相关微信小程序骨架屏实现内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 小程序如何构建骨架屏

    小程序如何构建骨架屏

    首屏 一般情况下,在首屏数据未拿到之前,为了提升用户的体验,会在页面上展示一个loading的图层,类似下面这个 其中除了菊花图以外网上还流传这各种各样的loading动画,在PC端上几乎要统一江湖了,不过最近在移动端上面看到不同于菊花图的加载方式,就是这篇文章需要分享的Skeleton Screen,中文称之为"骨架屏" 概念 A skeleton screen is essentially a blank version of a page into which informati

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

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

    目录 什么是骨架屏 小程序中骨架屏的生成方式 引入方法 显示与隐藏 为了优化用户体验,骨架屏一直是开发者比较喜欢的表现方式,也就是首屏占位的一种表现方式,不会让浏览者因为长时间的等待而焦躁.小程序中骨架屏的实现还是比较简单的,但是没用过的同学难免会误入歧途,今天就分享一下小程序中骨架屏的实现. 什么是骨架屏 骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容.通常在小程序中,我们需要手工维护骨架屏的代码,当业务变更时,同样

  • taro小程序添加骨架屏的实现代码

    最近做了一些小程序方面的性能优化,如分包加载,添加骨架屏等,这次主要说一下骨架屏的相关内容. 关于骨架屏,有三种方法: 1.直接请UI同学帮忙P张图,当做loading图放上去.这种方法简单粗暴,但是需要请人帮忙~ 2.根据每个页面,自己写一套相同的代码来覆盖样式.这种方法的工程量,你懂的~ 3.能不能写个组件呢?该组件自动获取元素位置大小信息来渲染,数据返回后将其卸载. 下面主要说第三种方法~ 主框架采用taro,一套代码兼容多端,但是今天这个代码,需要考虑兼容性~ 根据上面的思路,我们首先要

  • 更优雅的微信小程序骨架屏实现详解

    更优雅的微信小程序骨架屏实现详解

    一.演示 二.说明: 实现思路:需要默认数据,这样才能完美应对list,wx:if的情况,及flex宽度靠内容撑开的样式. 替换思路:和imageLoader加载器类似:先展示默认图片,拿到数据之后显示真实的图片 具体实现: 页面准备一份默认数据:defaultData xml中:<skeleton watchData={{与卡槽笨蛋一样的对象}}><slot/></skeleton> 页面onload时,data=defaultData 此时:watchData第一次

  • 如何在微信小程序中使用骨架屏的步骤

    本文介绍了微信小程序中使用骨架屏,分享给大家,具体如下: 先上效果图 ​ 骨架屏主要起到占位作用,向用户说明该区域有内容,有一定的心理准备. 聊聊背景:刚上线一款小程序,随着上架的东西越来越多,微信小程序加载越来越慢,会出现一段时间的白屏(大概2-3s),这对用户体验上来讲特别不友好.所以在网上开始找这方面的资料,骨架屏主要分为两种方案,下面来说说这两种方案. 1.为每个需要使用骨架屏的页面定制一套静态页面.这种方法缺点很明显,需要为每个页面单独定制,布局如果修改则需要同时修改两个页面,增加了维

  • 微信小程序骨架屏的应用与实现步骤详细记录

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

    目录 什么是骨架屏 小程序骨架屏的实现 1. 生成页面骨架 2. 骨架屏的应用 3. 使用注意 4. 思考后的封装 总结 什么是骨架屏 骨架屏是作为一种首次渲染加载优化的一种方法 我们打开一个应用后,应用会通过ajax来请求数据,而在这段空缺的时间,没有数据,内容缺失,这对于用户的感觉很不好,所以我们需要在这个时间段内通过骨架屏来填充这个空缺. 如上图所示,一个是没有内容,一个是骨架屏的填充,所以在加载的这一秒内给用户以骨架屏形式的填充是很有必要的. 小程序骨架屏的实现 1. 生成页面骨架 微信

  • 微信小程序全屏滚动字幕的实现方法详解

    微信小程序全屏滚动字幕的实现方法详解

    目录 一.实现背景 二.实现代码 三.滚动速度 四.后续优化 实现效果 一.实现背景 无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果 二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu

  • 微信小程序中使用vant框架的具体步骤

    微信小程序中使用vant框架的具体步骤

    目录 1.打开我们小程序的项目目录,然后打开文件所在的位置. 2.初始化项目文件 3.输入初始化项目的命令 4.安装依赖 5.使用组件 1.说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧. 2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间.Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一. 3.我们废话不多说,直接进入今天的主题.我们该如何在微信小程序中去使用vant组件库呢!

  • 微信小程序的WXSS和全局、页面配置详细讲解

    微信小程序的WXSS和全局、页面配置详细讲解

    目录 一,WXSS 1.1 rpx尺寸单位 1.2 样式导入@import 1.3 全局样式 补充:wxss的扩展-样式导入 二,全局配置 2.1 属性 三,页面配置 总结 一,WXSS 首先我们先介绍一下wxss,wxss是微信小程序独有的模板样式,它类似于web开发中的CSS,具备CSS大部分的功能,同时,它还拓展出了几个内容功能,接下来牛牛介绍一下新增的rpx尺寸单位以及样式导入@import. 1.1 rpx尺寸单位 rpx尺寸单位是微信独有的,主要用来解决屏适配问题.怎么回事呢?我们知

  • 微信小程序 刷新上拉下拉不会断详细介绍

    微信小程序 刷新上拉下拉不会断详细介绍

    微信小程序 上拉下拉不会断详细介绍 最开始看到效果图,不错,第一想到的是用做的,添加浮动层,然后设置浮动层高度.其实不然,大牛是"enablePullDownRefresh": "true"后,在页面添加遮掩层,并跟随底部滑动即可.(感觉自己IQ该充值了) 上代码 news.wxml <view class="top">下拉刷新</view> <view> <!--页面正文--> </view

  • 微信小程序 （一）新建项目hello WeApp 详细介绍

    微信小程序 （一）新建项目hello WeApp 详细介绍

    本篇默认已经成功安装微信小程序工具 新建项目 AppID查看公众开发平台设置查看(https://mp.weixin.qq.com) 项目名称随意填写 本地开发项目: 新建一个空的文件夹勾线当前会生成一个项目 打开项目 更详细的说多了也没啥意义看官网的简易教程非常详细!!!!!!!!! https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089807 相关文章: hello WeApp                     icon组件 Wi

  • 微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS

  • 微信小程序使用Echarts和分包的完整步骤

    前言 假期虽然结束了,但是它以另外一种形式展示我们身上(摸摸自己的小肚子).在小程序上以图形化显示数据就是分给我的假期预研任务,查了一下网上大佬们的文章了解到了Ucharts,F2,Wx-charts和Echarts,只尝试了F2和Echarts,由于Echarts的最近更新最近和我对Echarts更为熟悉,所以我选择了Echarts,F2也试了下,虽然弄出来了,但是我不是太熟悉所以就放弃了. 进入正题 首先我是看到别人的文章写Echarts的,给了官网的传送门,然后就去官网顺着看了,比较简单,

随机推荐