uni-app如何生成骨架屏

这篇具有很好参考价值的文章主要介绍了uni-app如何生成骨架屏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。

参考效果

骨架屏作用是缓解用户等待时的焦虑情绪,属于用户体验优化方案。
uni-app如何生成骨架屏,uni-app,uni-app
生成骨架屏

微信开发者工具提供了自动生成骨架屏代码的能力。

使用时需要把自动生成的 xxx.skeleton.vuexxx.skeleton.wxss 封装成 vue 组件。
1.点击模拟器中的页面信息/生成骨架屏,会生成两个文件
uni-app如何生成骨架屏,uni-app,uni-app
2.生成xxx.skeleton.vuexxx.skeleton.wxss 两个文件
uni-app如何生成骨架屏,uni-app,uni-app
3.将这两个文件封装成一个vue组件
4.在组件中使用文章来源地址https://www.toymoban.com/news/detail-812157.html

// 加载中标记
let isLoading = ref(false)
// 页面加载调用函数
onLoad(async () => {
  isLoading.value=true
  await Promise.all([getHomeBanner(), getCategoryPanel(), getHotPanel()])
  isLoading.value=false
})

<template>
  <scroll-view>
  // <pageSkeleton />  通过小程序生成的两个文件封装成的组件
    <pageSkeleton v-if="isLoading" />
    <template v-else>
      <!-- 自定义轮播图 -->
      <XtxSwiper :bannerList="bannerList" />
      <!-- 首页分类 -->
      <CategoryPanel :CategoryPanelList="CategoryPanelList" />
      <!-- 热门推荐 -->
      <HotPanel :HotPanelList="HotPanelList" />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="gussRef" />
    </template>
  </scroll-view>
</template>

到了这里,关于uni-app如何生成骨架屏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app App和H5平台上传视频截取视频第一帧生成图片

    提示:因为uni-app中renderjs仅支持App和H5平台,所以该方案仅支持当前这两个平台。 this.request为本人封装的接口请求方法,可以替换成个人的接口请求方法,如有需要可在下方留言 因为uni-app App端没有dom概念,不支持dom操作,并且uni-app的canvas不支持绘制video。renderjs完美解决了

    2023年04月09日
    浏览(57)
  • uni-app如何使用组件

    使用组件是uni-app的常见操作之一。以下是使用组件的步骤: 在uni-app项目中创建组件。 可以通过在components文件夹中创建一个.vue文件来创建组件。 也可以通过在HBuilderX中使用模板或向导来创建组件。 在需要使用组件的页面或组件中引入组件。 可以使用import导入组件,例如:

    2024年02月13日
    浏览(46)
  • uni-app--》如何制作一个APP并使用?

    🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:uni-app 🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言         ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的

    2023年04月09日
    浏览(47)
  • uni-app——如何阻止事件冒泡

    在开发移动应用程序时,我们经常需要处理用户交互事件。然而,有时候这些事件会冒泡,导致意外的行为和不良用户体验。在本文中,我们将探讨如何使用UniApp框架来阻止事件冒泡,并提供一些示例代码来帮助您理解如何实现这一功能。 1. 什么是事件冒泡? 在开始讨论如

    2024年02月08日
    浏览(50)
  • uni-app x生成的安卓包,安装时,提示不兼容。解决方案

    找到 manifest.json 进入:源码视图 packagename:包名;最好是和你“发行”(打包)时的包名一致。 abiFilters:需要兼容CPU的类型 minSdkVersion:应用兼容的最低Android版本(API等级) targetSdkVersion:应用适配的目标Android版本(API等级)   官方说明:manifest.json | uni-app官网 App-Android端发

    2024年02月03日
    浏览(96)
  • uni-app 微信小程序 图文生成图片 wxml-to-canvas

    在做的小程序要增加一个将文字与图片生成图片不可修改的功能,第一次做,在网上找了不少资料。参考了wxml-to-canvas | 微信开放文档  ,又看了一些相关事例,尝试写了一下。   需要准备的文件及配置项: 1、先把代码片段下载到本地 2、创建wxcomponents目录,把代码片段中的

    2024年02月09日
    浏览(51)
  • uni-app如何实现高性能

    这篇文章主要讲解uni-app如何实现高性能的问题? 什么是uni-app? 简单说一下什么是uni-app,uni-app是继承自vue.js,对vue做了轻度定制,并且实现了完整的组件化开发,并且支持多端发布的一种架构,开发的项目可适配多平台。 过内前端开发的大致分歧  国内前端开发生态现在的

    2024年04月11日
    浏览(42)
  • uni-app 如何返回到指定的页面

    实际开发中,发现了一个问题,即使签署合同的时候,发现调用法大大的页面,出现了一个问题,就是签署后,点回退,回退到了重新签署的页面。所以需要对回退进行自定义处理。 处理的话,就要到指定的返回页面。这里还存在不签署的情况,回退要是原来的页面。所以要

    2024年01月18日
    浏览(64)
  • 小程序-uni-app:将页面(html+css)生成图片/海报/名片,进行下载 保存到手机

    一、需要描述 本文实现,uniapp微信小程序,把页面内容保存为图片,并且下载到手机上。 说实话网上找了很多资料,但是效果不理想,直到看了一个开源项目,我知道可以实现了。 本文以开源项目uniapp-wxml-to-canvas 为蓝本 记录集成的步骤,以供参考。 详细内容可以下载并启

    2024年02月07日
    浏览(57)
  • 【uni-app】后端返回base64转二维码并显示在canvas生成海报

    使用官方的 uni.getFileSystemManager().writeFile() 方法可将base64码转成的二维码显示在画布上,代码如下: const obj = {                     page: \\\'pages/sort/goodsDetail\\\',                     co_Nu: this.goodInfo.co_Nu                 }                 const _this = this       

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包