什么是骨架屏

骨架屏是作為一種首次渲染加載優(yōu)化的一種方法

我們打開一個應(yīng)用后，應(yīng)用會通過ajax來請求數(shù)據(jù)，而在這段空缺的時間，沒有數(shù)據(jù)，內(nèi)容缺失，這對于用戶的感覺很不好，所以我們需要在這個時間段內(nèi)通過骨架屏來填充這個空缺。

如上圖所示，一個是沒有內(nèi)容，一個是骨架屏的填充，所以在加載的這一秒內(nèi)給用戶以骨架屏形式的填充是很有必要的。

小程序骨架屏的實現(xiàn)

1. 生成頁面骨架

微信小程序開發(fā)者工具提供了生成骨架屏的工具，所以我們可以快速高效得實現(xiàn)加載骨架屏

點擊三個點，生成骨架屏，即可在對應(yīng)page文件下生成兩個文件，文件中包括了骨架屏的使用方式。

2. 骨架屏的應(yīng)用

工具生成的骨架屏文件中包含了使用方式，下面我拿person目錄舉例。

• 在person.wxml的頭部加入下面的代碼（該代碼在生成的文件中的注釋有提示）

  <import src="person.skeleton.wxml"/>
  <template is="skeleton" wx:if="{{loading}}" />

• 在person.wxss的頭部引入下面的代碼，當(dāng)然在生成的文件注釋里也有相關(guān)提示

  @import "./person.skeleton.wxss";

• 在請求的回調(diào)函數(shù)中進(jìn)行骨架屏的控制

  var set = setInterval(function () {
      clearInterval(set);
      that.setData({
          loading: false, //停止骨架屏
      })
  }, 1000)

3. 使用注意

• 頁面更改后可以骨架屏隨時更新，隨時替換，很方便。
• 在使用的過程中經(jīng)常會遇到元素被提前加載出的情況所以我們需要為真實的頁面元素使用wx:if來和骨架屏進(jìn)行反向操作，可以避免元素加載后出現(xiàn)與骨架屏重疊的現(xiàn)象。

  <template is="skeleton" wx:if="{{loading}}" />
  <Header  customTitle="個人中心"></Header>
  <view class="head" wx:if="{{!isLogin&&!loading}}" bindtap="login">
  <image src="../../images/{{season}}-people.png" class="head-img"></image>
  <view class="head-name">點擊登錄</view>
  </view>

4. 思考后的封裝

骨架屏加載函數(shù)，我們每個頁面都需要進(jìn)行調(diào)用，在我寫完一座xx山后意思到了這件事情，出現(xiàn)了這種情況

好了，我們改過自新

• 在utils文件下封裝一個骨架屏加載方法

      const loadScreen = (that,time) => {
      var set = setInterval(function () {
          clearInterval(set);
          that.setData({
              loading: false, //停止骨架屏
              hidden:false
          })
      }, time)
  }

• 在使用頁面引入

  let util = require('../../utils/util.js')

• 直接調(diào)用

  let that =this;
  util.loadScreen(that,1500)

總結(jié)

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

最新評論