目錄

• 什麼是骨架屏
• 小程式中骨架屏的生成方式
• 引入方法
• 顯示與隱藏

為了優化使用者體驗，骨架屏一直是開發者比較喜歡的表現方式，也就是首屏佔位的一種表現方式，不會讓瀏覽者因為長時間的等待而焦躁。小程式中骨架www.cppcns.com屏的實現還是比較簡單的，但是沒用過的同學難免會誤入歧途，今天就分享一下小程式中骨架屏的實現。

什麼是骨架屏

骨架屏是頁面的一個空白版本，通常會在頁面完全渲染之前，通過一些灰色的區塊大致勾勒出輪廓，待資料載入完成後，再替換成真實的內容。通常在小程式中，我們需要手工維護骨架屏的程式碼，當業務變更時，同樣需要對骨架屏程式碼進行調整。為了開發的便利，開發者工具提供了自動生成骨架屏程式碼的能力。

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

微信開發者工具可以為當前頁面生成骨架屏，工具入口位於模擬器面板右下角三點處。

引入方法

骨架屏程式碼通過小程式模板（template）的方式引入 以 pages/index/index 頁面為例，引入方式如下。

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

/* pages/index/index.wxss 中引入樣式 */
@import "index.skelehttp://www.cppcns.com
 
ton.wxss";

顯示與隱藏

與普通的模板相同，通過 wx:if 控制顯示隱藏。
可以設定延遲載入，或者在頁面所有資料請求成功之後隱藏骨架屏。
延遲載入的程式碼放在 onLoad 生命週期中，程式碼如下：

   // 漸進式載入資料，逐步隱藏 loading
  progressiveLoad() {
    setTimeout(() => {
      this.setData({
        loading: false
      })
    },1000)
  },onLoad() {
    this.progressiveLoad()  // 漸進式載入資料，逐步隱藏 loadhgbSxTsk
 
ing
  }

開發者還可以根據需要設定文字、圖片、按鈕的顏色和形狀，同時可根據 excludes、remove、hide等忽視或隱藏部分頁面元素，以獲取更優的展示效果。具體配置見骨架屏官方文件

到此這篇關於微信小程式骨架屏的實現示例的文章就介紹到這了,更多相關小程式骨架屏內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！