微信小程序骨架屏的實現(xiàn)示例
為了優(yōu)化用戶體驗，骨架屏一直是開發(fā)者比較喜歡的表現(xiàn)方式，也就是首屏占位的一種表現(xiàn)方式，不會讓瀏覽者因為長時間的等待而焦躁。小程序中骨架屏的實現(xiàn)還是比較簡單的，但是沒用過的同學(xué)難免會誤入歧途，今天就分享一下小程序中骨架屏的實現(xiàn)。
什么是骨架屏
骨架屏是頁面的一個空白版本，通常會在頁面完全渲染之前，通過一些灰色的區(qū)塊大致勾勒出輪廓，待數(shù)據(jù)加載完成后，再替換成真實的內(nèi)容。通常在小程序中，我們需要手工維護(hù)骨架屏的代碼，當(dāng)業(yè)務(wù)變更時，同樣需要對骨架屏代碼進(jìn)行調(diào)整。為了開發(fā)的便利，開發(fā)者工具提供了自動生成骨架屏代碼的能力。
小程序中骨架屏的生成方式
微信開發(fā)者工具可以為當(dāng)前頁面生成骨架屏，工具入口位于模擬器面板右下角三點處。
引入方法
骨架屏代碼通過小程序模板（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.skeleton.wxss";
顯示與隱藏
與普通的模板相同，通過 wx:if 控制顯示隱藏。
可以設(shè)置延遲加載，或者在頁面所有數(shù)據(jù)請求成功之后隱藏骨架屏。
延遲加載的代碼放在 onLoad 生命周期中，代碼如下：
// 漸進(jìn)式加載數(shù)據(jù)，逐步隱藏 loading
progressiveLoad() {
setTimeout(() => {
this.setData({
loading: false
})
}, 1000)
},
onLoad() {
this.progressiveLoad() // 漸進(jìn)式加載數(shù)據(jù)，逐步隱藏 loading
}
開發(fā)者還可以根據(jù)需要設(shè)置文字、圖片、按鈕的顏色和形狀，同時可根據(jù) excludes、remove、hide等忽視或隱藏部分頁面元素，以獲取更優(yōu)的展示效果。具體配置見骨架屏官方文檔
到此這篇關(guān)于微信小程序骨架屏的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序骨架屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱，這種功能怎么實現(xiàn)呢？本篇文章帶你探索2023-02-02
JavaScript實現(xiàn)鼠標(biāo)經(jīng)過表格行給出顏色標(biāo)識
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)鼠標(biāo)經(jīng)過表格行給出顏色標(biāo)識，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
使用element-plus時重寫樣式不起作用的問題及解決方法
這篇文章給大家介紹使用element-plus時重寫樣式不起作用的問題及解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-09-09
JavaScript之DOM插入更新刪除_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之DOM插入更新刪除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Javascript 實現(xiàn)計算器時間功能詳解及實例（二）
這篇文章主要介紹了Javascript 實現(xiàn)計算器時間功能詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了ES6 Array常用擴展的應(yīng)用,結(jié)合實例形式分析各種常見擴展方法針對Array數(shù)組的轉(zhuǎn)換、遍歷、查找、運算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
詳解webpack-dev-server使用http-proxy解決跨域問題
這篇文章主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
JavaScript+Java實現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法
借助iText這個Java庫,我們可以將HTML文件保存為圖片文件進(jìn)而轉(zhuǎn)換成PDF格式,接下來就來具體看下JavaScript+Java實現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
本篇文章主要介紹了JS解決position:sticky的兼容性問題的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10