前端中骨架屏的三種運用方式介紹
一、骨架屏的三大運用方式及案例
1.靜態(tài)HTML/CSS方案
<!-- 電商商品詳情頁案例 --> <div class="skeleton-container"> <div class="skeleton-header"></div> <div class="skeleton-gallery"> <div class="skeleton-image"></div> <div class="skeleton-thumbnails"> <div class="skeleton-thumb"></div> <div class="skeleton-thumb"></div> </div> </div> <div class="skeleton-content"> <div class="skeleton-line" style="width:80%"></div> <div class="skeleton-line" style="width:60%"></div> </div> </div> <style> .skeleton-image { background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 50%,#f2f2f2 75%); animation: shimmer 1.5s infinite; height: 300px; } @keyframes shimmer { to { background-position-x: -200%; } } </style>
關(guān)鍵點:通過CSS動畫模擬加載效果,需精確匹配真實DOM結(jié)構(gòu)
2.組件化方案(Vue/React)
// Vue動態(tài)骨架屏組件 <template> <div v-if="loading" class="skeleton-wrapper"> <SkeletonItem v-for="i in 5" :key="i" :width="i===1 ? '80%' : '100%'" :height="i===1 ? '24px' : '16px'"/> </div> <div v-else> <ActualContent :data="contentData"/> </div> </template> <script> export default { components: { SkeletonItem: { props: ['width','height'], template: `<div class="skeleton-item" :style="{width, height}"/>` } } } </script>
優(yōu)勢:可復用組件,動態(tài)控制顯示狀態(tài)
3.自動化生成方案
// 使用vue-skeleton-webpack-plugin const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new SkeletonWebpackPlugin({ webpackConfig: { entry: './src/skeleton.js' }, minimize: true, quiet: true }) ] } }
特點:通過路由匹配自動生成對應(yīng)骨架屏
二、關(guān)鍵實現(xiàn)要點
1.視覺一致性原則
- 占位元素需與真實內(nèi)容布局1:1對應(yīng)
- 使用與UI風格協(xié)調(diào)的漸變色系
- 動畫持續(xù)時間控制在1-1.5秒
2.性能優(yōu)化策略
- 骨架屏代碼應(yīng)控制在5KB以內(nèi)
- 避免使用圖片資源,純CSS實現(xiàn)
- 與PWA的預緩存策略結(jié)合使用
3.狀態(tài)管理規(guī)范
// 鴻蒙APP中的狀態(tài)管理案例 Page({ data: { loading: true, error: false, empty: false }, onLoad() { fetchData().then(res => { this.setData({ loading: false, list: res.data || [] }); }).catch(() => { this.setData({ error: true }); }); } })
最佳實踐:需處理加載失敗/數(shù)據(jù)為空等邊界情況
到此這篇關(guān)于前端中骨架屏的三種運用方式介紹的文章就介紹到這了,更多相關(guān)前端骨架屏運用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實現(xiàn)transform實現(xiàn)扇子效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)transform實現(xiàn)扇子效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-01-01JS 組件系列之 bootstrap treegrid 組件封裝過程
最近產(chǎn)品需要設(shè)計一套相對完整的組織架構(gòu)的解決方案,由于組織架構(gòu)涉及到層級關(guān)系,在表格里面展示層級關(guān)系,自然就要用到所謂的treegrid。下面小編通過本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過程,需要的朋友可以參考下2017-04-04使用JavaScript實現(xiàn)等比縮放的幾種常見方法
這篇文章主要介紹了如何使用JavaScript對HTML中的元素和任意DOM元素進行等比縮放,通過獲取容器或元素的尺寸信息,計算縮放比例,并應(yīng)用CSS變換(transform屬性)來實現(xiàn)等比縮放,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01