快捷導(dǎo)航

微信小程序骨架屏的實(shí)現(xiàn)示例

更新時(shí)間：2021年10月20日 09:44:34 作者：代碼搬運(yùn)媛

本文主要介紹了微信小程序骨架屏的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

為了優(yōu)化用戶(hù)體驗(yàn)，骨架屏一直是開(kāi)發(fā)者比較喜歡的表現(xiàn)方式，也就是首屏占位的一種表現(xiàn)方式，不會(huì)讓瀏覽者因?yàn)殚L(zhǎng)時(shí)間的等待而焦躁。小程序中骨架屏的實(shí)現(xiàn)還是比較簡(jiǎn)單的，但是沒(méi)用過(guò)的同學(xué)難免會(huì)誤入歧途，今天就分享一下小程序中骨架屏的實(shí)現(xiàn)。

什么是骨架屏

骨架屏是頁(yè)面的一個(gè)空白版本，通常會(huì)在頁(yè)面完全渲染之前，通過(guò)一些灰色的區(qū)塊大致勾勒出輪廓，待數(shù)據(jù)加載完成后，再替換成真實(shí)的內(nèi)容。通常在小程序中，我們需要手工維護(hù)骨架屏的代碼，當(dāng)業(yè)務(wù)變更時(shí)，同樣需要對(duì)骨架屏代碼進(jìn)行調(diào)整。為了開(kāi)發(fā)的便利，開(kāi)發(fā)者工具提供了自動(dòng)生成骨架屏代碼的能力。

小程序中骨架屏的生成方式

微信開(kāi)發(fā)者工具可以為當(dāng)前頁(yè)面生成骨架屏，工具入口位于模擬器面板右下角三點(diǎn)處。

引入方法

骨架屏代碼通過(guò)小程序模板（template）的方式引入以 pages/index/index 頁(yè)面為例，引入方式如下。

<!-- pages/index/index.wxml 引入模板 -->
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" data="{{}}"/>

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

顯示與隱藏

與普通的模板相同，通過(guò) wx:if 控制顯示隱藏。
可以設(shè)置延遲加載，或者在頁(yè)面所有數(shù)據(jù)請(qǐng)求成功之后隱藏骨架屏。
延遲加載的代碼放在 onLoad 生命周期中，代碼如下：

   // 漸進(jìn)式加載數(shù)據(jù)，逐步隱藏 loading
  progressiveLoad() {
    setTimeout(() => {
      this.setData({
        loading: false
      })
    }, 1000)
  },

  onLoad() {
    this.progressiveLoad()  // 漸進(jìn)式加載數(shù)據(jù)，逐步隱藏 loading
  }

開(kāi)發(fā)者還可以根據(jù)需要設(shè)置文字、圖片、按鈕的顏色和形狀，同時(shí)可根據(jù) excludes、remove、hide等忽視或隱藏部分頁(yè)面元素，以獲取更優(yōu)的展示效果。具體配置見(jiàn)骨架屏官方文檔

到此這篇關(guān)于微信小程序骨架屏的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序骨架屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: