taro小程序添加骨架屏的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-09-08 11:32:44 來(lái)源：腳本之家閱讀：307 作者：Dlingling 欄目：web開(kāi)發(fā)

最近做了一些小程序方面的性能優(yōu)化，如分包加載，添加骨架屏等，這次主要說(shuō)一下骨架屏的相關(guān)內(nèi)容。

關(guān)于骨架屏，有三種方法：

1.直接請(qǐng)UI同學(xué)幫忙P張圖，當(dāng)做loading圖放上去。這種方法簡(jiǎn)單粗暴，但是需要請(qǐng)人幫忙~
2.根據(jù)每個(gè)頁(yè)面，自己寫一套相同的代碼來(lái)覆蓋樣式。這種方法的工程量，你懂的~
3.能不能寫個(gè)組件呢？該組件自動(dòng)獲取元素位置大小信息來(lái)渲染，數(shù)據(jù)返回后將其卸載。

下面主要說(shuō)第三種方法~

主框架采用taro，一套代碼兼容多端，但是今天這個(gè)代碼，需要考慮兼容性~

根據(jù)上面的思路，我們首先要找到骨架屏的容器，然后找到需要P成灰色的元素，獲取該元素的位置大小信息，最后就是渲染了~

獲取元素，taro提供了API，Taro.createSelectorQuery()。通過(guò)這個(gè)API返回一個(gè)SelectorQuery對(duì)象實(shí)例，然后再通過(guò)selectAll()來(lái)查找骨架中帶有特定類的class名，查找之后通過(guò)boundingClientRect()獲取元素的位置大小信息，把這些信息存放在數(shù)組中。
我這邊寫了兩個(gè)類，一個(gè)是skeleton-radius，渲染圓形；一個(gè)是skeleton-rect，渲染長(zhǎng)方形。后續(xù)大家可以自行擴(kuò)展。

文字有點(diǎn)多，大家可能看著有點(diǎn)云里霧里的，下面上代碼~

  // 百度小程序目前不支持跨自定義組件的后代選擇器: >>>
  // 但是H5使用后代選擇器(.the-ancestor .the-descendant)的時(shí)候，可以自動(dòng)識(shí)別自定義組件內(nèi)的后代
  // 微信小程序支持跨自定義組件都后代選擇器(.the-ancestor >>> .the-descendant)，可修改為如`.${this.props.selector} >>> .${this.props.selector}-radius`
  if (process.env.TARO_ENV === 'weapp') {
    Taro.createSelectorQuery().selectAll(`.${this.props.selector} >>> .${this.props.selector}-radius`)
      .boundingClientRect().exec(rect => {
        that.setState({
          radiusList: rect[0]
        });
      });
  }
  else {
    Taro.createSelectorQuery().selectAll(`.${this.props.selector} .${this.props.selector}-radius`)
    .boundingClientRect().exec(rect => {
      that.setState({
        radiusList: rect[0]
      });
    });
  }

大家也看到上面的注釋了，如果要在多端運(yùn)行，可先判斷環(huán)境，根據(jù)環(huán)境使用不同的選擇器。上面代碼是實(shí)現(xiàn)一個(gè)圓形的灰色區(qū)域~大家如果有多個(gè)形狀的需求的話，可以簡(jiǎn)單封裝一個(gè)函數(shù)，這里我就不再細(xì)說(shuō)了，具體的可以到Demo詳細(xì)查看~
細(xì)說(shuō)一下后代選擇器的兼容性問(wèn)題：

百度小程序目前不支持跨自定義組件的后代選擇器: >>>。
但是H5使用后代選擇器(.the-ancestor .the-descendant)的時(shí)候，可以自動(dòng)識(shí)別自定義組件內(nèi)的后代。使用自定義組件時(shí)，外層是否有元素包裹，都可識(shí)別到自定義組件內(nèi)部的指定類選擇器。
微信小程序支持跨自定義組件的后代選擇器(.the-ancestor >>> .the-descendant)，但使用自定義組件時(shí)，外層不能嵌套元素，否則無(wú)法識(shí)別。

接下來(lái)就是渲染了，這個(gè)比較簡(jiǎn)單，直接上代碼~這里背景色和將要P成條狀等的元素的背景色都可以在使用組件時(shí)自定義傳入，也可以不傳，有默認(rèn)色~

 <View className='skeleton-container' style={{background: `${bgColor}`}}>
      {
        radiusList.map(radiusItem => (
          <View className='skeleton-item skeleton-item-radius' style={{width: `${radiusItem.width}PX`, height: `${radiusItem.height}PX`,
            background: `${itemColor}`, top: `${radiusItem.top}PX`, left: `${radiusItem.left}PX`}}
          />
        ))
      }
      {
        rectList.map(rectItem => (
          <View className='skeleton-item' style={{width: `${rectItem.width}PX`, height: `${rectItem.height}PX`,
            background: `${itemColor}`, top: `${rectItem.top}PX`, left: `${rectItem.left}PX`}}
          />
        ))
      }
    </View>

到這里，組件已經(jīng)完成了，使用的時(shí)候可以直接引入組件，然后傳入selector就可以了，注意，由于數(shù)據(jù)是動(dòng)態(tài)獲取的，頁(yè)面開(kāi)始為空，這里就需要mock一些假數(shù)據(jù)來(lái)填充頁(yè)面了~要覆蓋的元素類名必須和組件中的圖形類保持一致~

  <View className='container' style={{fontSize: '20PX'}}>
      {
        showSkeleton && <Skeleton
          selector='skeleton'
          bgColor='pink'
          itemColor='skyblue'
        />
      }
      <View className='skeleton'>
        <View className='userInfo'>
          <Image
            src={userInfo.avatarUrl}
            alt='用戶頭像'
            className='userInfo-avatar skeleton-radius'
          />
          <Text>{userInfo.nickName}</Text>
        </View>
        <View>
          {
            list.map(item => (
              <View className='skeleton-rect' style={{marginBottom: '30PX'}}>{item}</View>
            ))
          }
        </View>
        {/* 自定義組件外層最好沒(méi)有元素包裹，否則微信小程序無(wú)法識(shí)別，但是H5可以識(shí)別 */}
        <List />
      </View>
    </View>

看到注釋了嗎？使用自定義組件時(shí)一定要注意噢~自定義組件若被元素報(bào)錯(cuò)，微信小程序無(wú)法識(shí)別到自定義組件內(nèi)的圖形類?。?！

最后要說(shuō)一下適合使用骨架屏的場(chǎng)景：頁(yè)面結(jié)構(gòu)簡(jiǎn)單，元素的寬高固定~若元素寬高不固定的話，你寫的mock假數(shù)據(jù)可能和實(shí)際渲染出來(lái)的頁(yè)面差距較大，例如瀑布流~

好了，這次的一些收獲就到這里了~大家如果有更好的方法，可以留言交流~最后，附上完整的代碼地址~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

taro小程序添加骨架屏的實(shí)現(xiàn)代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽