欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2021年10月20日 09:44:34   作者:代碼搬運(yùn)媛  
本文主要介紹了微信小程序骨架屏的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

什么是骨架屏

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

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

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

引入方法

骨架屏代碼通過小程序模板(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ù)請(qǐng)求成功之后隱藏骨架屏。
延遲加載的代碼放在 onLoad 生命周期中,代碼如下:

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

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

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

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

相關(guān)文章

最新評(píng)論