一步步教你使用 Vue.js 实现骨架屏加载

阅读时长 6 分钟读完

在移动互联网时代,网页加载速度成为了用户体验的关键指标之一。骨架屏技术可以在页面内容加载前展示页面骨架结构,提高用户等待体验,优化用户体验,在一些重度交互场景中应用广泛。本文将介绍如何使用 Vue.js 实现骨架屏加载,涉及内容详细且有深度和学习以及指导意义。

什么是骨架屏加载?

骨架屏是指一种展示网页内容骨架结构的技术,它可以在页面内容加载前展示页面骨架结构,称为“骨架屏”。骨架屏的主要作用是优化用户等待体验,不仅可以让用户对页面内容有预期,提高了用户体验,在一些重度交互场景中应用广泛,比如评论区、购物车、文章列表等。

Vue.js 实现骨架屏加载步骤

第一步:创建骨架屏组件

一个骨架屏通常有两个布局方式:一种是图形骨架,一种是文本骨架。

  • 图形骨架

图形骨架是指使用不同的线条和方形来模拟页面元素的形状,如下图所示:

代码实现如下:

-- -------------------- ---- -------
----------
  ---- -----------------
    ---- ---------------------------
    ---- ---------------------------
    ---- ---------------------------
    ---- ---------------------------
  ------
-----------

--------
  ------ ------- -
    ----- -----------
    -- ----- --- -- ---------- -----------
    ----------- ----
  --
---------

------ ------------
  --------- -
    -------- -----
    ------------ -------
  -
  ------------- -
    ------ ------
    ------- -----
    ----------------- -----
    ------------- -----
    ---------- ------- -- ------ ---------
  -
  ---------- ------- -
    -- -
      -------- ----
    -
    --- -
      -------- --
    -
    ---- -
      -------- ----
    -
  -
--------
  • 文本骨架

文本骨架是通过使用占位符内容,使得页面看起来像是预留了一些区域给真实内容,如下图所示:

代码实现如下:

-- -------------------- ---- -------
----------
  ---- -----------------
    ---- ----------------------------
    ---- ----------------------------
    ---- ----------------------------
    ---- ----------------------------
  ------
-----------

--------
  ------ ------- -
    ----- -----------
    ----------- ----
  --
---------

------ ------------
  --------- -
    -------- -----
    --------------- -------
    ---------------- --------------
    ------------ --------
    -------- -----
  -
  -------------- -
    ------- -----
    ----------------- -----
    -------------- -----
    ---------- ------- -- ------ ---------
  -
  ---------- ------- -
    -- -
      -------- ----
    -
    --- -
      -------- --
    -
    ---- -
      -------- ----
    -
  -
--------

第二步:创建通用的骨架屏组件

为了方便使用,我们可以创建一个通用的骨架屏组件。

-- -------------------- ---- -------
----------
  ---- -----------------
    -------------
  ------
-----------

--------
  ------ ------- -
    ----- -----------
    ----------- -----
    -- -- ----- ----------
    ------ -
      ----- -
        ----- -------
        -------- ------
      --
      ----- -
        ----- -------
        -------- -
      -
    -
  --
---------

------ ------------
  --------- -
    -------- -----
    --------------- -------
    ---------------- --------------
    ------------ --------
    -------- -----
  -
  -------------- -
    ------- -----
    ----------------- -----
    -------------- -----
    ---------- ------- -- ------ ---------
  -
  ------------- -
    ------ ------
    ------- -----
    ----------------- -----
    ------------- -----
    ---------- ------- -- ------ ---------
  -
  ---------- ------- -
    -- -
      -------- ----
    -
    --- -
      -------- --
    -
    ---- -
      -------- ----
    -
  -
--------

第三步:在需要使用骨架屏的组件中引入通用骨架屏组件

-- -------------------- ---- -------
----------
  -----
    --------- ----------------------
    --------- ----------- ---------------------
  ------
-----------

--------
  ------ -------- ---- ----------------------------

  ------ ------- -
    ----- --------------
    ----------- -
      --------
    -
  --
---------

结语

通过本文,你已经了解了骨架屏加载的基本概念和原理,并且学会了使用 Vue.js 实现骨架屏加载的方法。可以根据不同的业务需求和加载内容选择不同的骨架屏布局方式,为用户提供更好的等待体验,优化用户体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67975015504e4ea9bde6a717

纠错
反馈