国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

uni-app如何生成骨架屏

這篇具有很好參考價(jià)值的文章主要介紹了uni-app如何生成骨架屏。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

骨架屏是頁面的一個(gè)空白版本,通常會(huì)在頁面完全渲染之前,通過一些灰色的區(qū)塊大致勾勒出輪廓,待數(shù)據(jù)加載完成后,再替換成真實(shí)的內(nèi)容。

參考效果

骨架屏作用是緩解用戶等待時(shí)的焦慮情緒,屬于用戶體驗(yàn)優(yōu)化方案。
uni-app如何生成骨架屏,uni-app,uni-app
生成骨架屏

微信開發(fā)者工具提供了自動(dòng)生成骨架屏代碼的能力。

使用時(shí)需要把自動(dòng)生成的 xxx.skeleton.vuexxx.skeleton.wxss 封裝成 vue 組件。
1.點(diǎn)擊模擬器中的頁面信息/生成骨架屏,會(huì)生成兩個(gè)文件
uni-app如何生成骨架屏,uni-app,uni-app
2.生成xxx.skeleton.vuexxx.skeleton.wxss 兩個(gè)文件
uni-app如何生成骨架屏,uni-app,uni-app
3.將這兩個(gè)文件封裝成一個(gè)vue組件
4.在組件中使用文章來源地址http://www.zghlxwxcb.cn/news/detail-812157.html

// 加載中標(biāo)記
let isLoading = ref(false)
// 頁面加載調(diào)用函數(shù)
onLoad(async () => {
  isLoading.value=true
  await Promise.all([getHomeBanner(), getCategoryPanel(), getHotPanel()])
  isLoading.value=false
})

<template>
  <scroll-view>
  // <pageSkeleton />  通過小程序生成的兩個(gè)文件封裝成的組件
    <pageSkeleton v-if="isLoading" />
    <template v-else>
      <!-- 自定義輪播圖 -->
      <XtxSwiper :bannerList="bannerList" />
      <!-- 首頁分類 -->
      <CategoryPanel :CategoryPanelList="CategoryPanelList" />
      <!-- 熱門推薦 -->
      <HotPanel :HotPanelList="HotPanelList" />
      <!-- 猜你喜歡 -->
      <XtxGuess ref="gussRef" />
    </template>
  </scroll-view>
</template>

到了這里,關(guān)于uni-app如何生成骨架屏的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • uni-app App和H5平臺(tái)上傳視頻截取視頻第一幀生成圖片

    uni-app App和H5平臺(tái)上傳視頻截取視頻第一幀生成圖片

    提示:因?yàn)閡ni-app中renderjs僅支持App和H5平臺(tái),所以該方案僅支持當(dāng)前這兩個(gè)平臺(tái)。 this.request為本人封裝的接口請求方法,可以替換成個(gè)人的接口請求方法,如有需要可在下方留言 因?yàn)閡ni-app App端沒有dom概念,不支持dom操作,并且uni-app的canvas不支持繪制video。renderjs完美解決了

    2023年04月09日
    瀏覽(30)
  • uni-app如何使用組件

    使用組件是uni-app的常見操作之一。以下是使用組件的步驟: 在uni-app項(xiàng)目中創(chuàng)建組件。 可以通過在components文件夾中創(chuàng)建一個(gè).vue文件來創(chuàng)建組件。 也可以通過在HBuilderX中使用模板或向?qū)韯?chuàng)建組件。 在需要使用組件的頁面或組件中引入組件。 可以使用import導(dǎo)入組件,例如:

    2024年02月13日
    瀏覽(20)
  • uni-app--》如何制作一個(gè)APP并使用?

    uni-app--》如何制作一個(gè)APP并使用?

    ???作者簡介:大家好,我是亦世凡華、渴望知識儲(chǔ)備自己的一名在校大學(xué)生 ??個(gè)人主頁:亦世凡華、 ??系列專欄:uni-app ??座右銘:人生亦可燃燒,亦可腐敗,我愿燃燒,耗盡所有光芒。 ??引言 ?????????經(jīng)過web前端的學(xué)習(xí),相信大家對于前端開發(fā)有了一定深入的

    2023年04月09日
    瀏覽(17)
  • uni-app——如何阻止事件冒泡

    在開發(fā)移動(dòng)應(yīng)用程序時(shí),我們經(jīng)常需要處理用戶交互事件。然而,有時(shí)候這些事件會(huì)冒泡,導(dǎo)致意外的行為和不良用戶體驗(yàn)。在本文中,我們將探討如何使用UniApp框架來阻止事件冒泡,并提供一些示例代碼來幫助您理解如何實(shí)現(xiàn)這一功能。 1. 什么是事件冒泡? 在開始討論如

    2024年02月08日
    瀏覽(27)
  • uni-app x生成的安卓包,安裝時(shí),提示不兼容。解決方案

    uni-app x生成的安卓包,安裝時(shí),提示不兼容。解決方案

    找到?manifest.json 進(jìn)入:源碼視圖 packagename:包名;最好是和你“發(fā)行”(打包)時(shí)的包名一致。 abiFilters:需要兼容CPU的類型 minSdkVersion:應(yīng)用兼容的最低Android版本(API等級) targetSdkVersion:應(yīng)用適配的目標(biāo)Android版本(API等級) ? 官方說明:manifest.json | uni-app官網(wǎng) App-Android端發(fā)

    2024年02月03日
    瀏覽(32)
  • uni-app 微信小程序 圖文生成圖片 wxml-to-canvas

    uni-app 微信小程序 圖文生成圖片 wxml-to-canvas

    在做的小程序要增加一個(gè)將文字與圖片生成圖片不可修改的功能,第一次做,在網(wǎng)上找了不少資料。參考了wxml-to-canvas | 微信開放文檔? ,又看了一些相關(guān)事例,嘗試寫了一下。 ? 需要準(zhǔn)備的文件及配置項(xiàng): 1、先把代碼片段下載到本地 2、創(chuàng)建wxcomponents目錄,把代碼片段中的

    2024年02月09日
    瀏覽(25)
  • uni-app如何實(shí)現(xiàn)高性能

    uni-app如何實(shí)現(xiàn)高性能

    這篇文章主要講解uni-app如何實(shí)現(xiàn)高性能的問題? 什么是uni-app? 簡單說一下什么是uni-app,uni-app是繼承自vue.js,對vue做了輕度定制,并且實(shí)現(xiàn)了完整的組件化開發(fā),并且支持多端發(fā)布的一種架構(gòu),開發(fā)的項(xiàng)目可適配多平臺(tái)。 過內(nèi)前端開發(fā)的大致分歧? 國內(nèi)前端開發(fā)生態(tài)現(xiàn)在的

    2024年04月11日
    瀏覽(29)
  • uni-app 如何返回到指定的頁面

    實(shí)際開發(fā)中,發(fā)現(xiàn)了一個(gè)問題,即使簽署合同的時(shí)候,發(fā)現(xiàn)調(diào)用法大大的頁面,出現(xiàn)了一個(gè)問題,就是簽署后,點(diǎn)回退,回退到了重新簽署的頁面。所以需要對回退進(jìn)行自定義處理。 處理的話,就要到指定的返回頁面。這里還存在不簽署的情況,回退要是原來的頁面。所以要

    2024年01月18日
    瀏覽(20)
  • 小程序-uni-app:將頁面(html+css)生成圖片/海報(bào)/名片,進(jìn)行下載 保存到手機(jī)

    小程序-uni-app:將頁面(html+css)生成圖片/海報(bào)/名片,進(jìn)行下載 保存到手機(jī)

    一、需要描述 本文實(shí)現(xiàn),uniapp微信小程序,把頁面內(nèi)容保存為圖片,并且下載到手機(jī)上。 說實(shí)話網(wǎng)上找了很多資料,但是效果不理想,直到看了一個(gè)開源項(xiàng)目,我知道可以實(shí)現(xiàn)了。 本文以開源項(xiàng)目uniapp-wxml-to-canvas 為藍(lán)本 記錄集成的步驟,以供參考。 詳細(xì)內(nèi)容可以下載并啟

    2024年02月07日
    瀏覽(97)
  • 【uni-app】后端返回base64轉(zhuǎn)二維碼并顯示在canvas生成海報(bào)

    【uni-app】后端返回base64轉(zhuǎn)二維碼并顯示在canvas生成海報(bào)

    使用官方的 uni.getFileSystemManager().writeFile() 方法可將base64碼轉(zhuǎn)成的二維碼顯示在畫布上,代碼如下: const obj = { ?? ??? ??? ??? ??? ?page: \\\'pages/sort/goodsDetail\\\', ?? ??? ??? ??? ??? ?co_Nu: this.goodInfo.co_Nu ?? ??? ??? ??? ?} ?? ??? ??? ??? ?const _this = this ?? ???

    2024年02月11日
    瀏覽(80)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包