什么是骨架屏

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

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

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

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

1. 生成頁面骨架

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

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

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. 使用注意

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

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

4. 思考后的封裝

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

好了，我們改過自新

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

      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)用與實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序骨架屏實(shí)現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論