uniapp实战 —— 骨架屏

朝阳392023-12-12 9:36

1. 自动生成骨架屏代码

在微信开发者工具中，预览界面点击生成骨架屏


确定后，会自动打开骨架屏代码文件 pages\index\index.skeleton.wxml

2. 将骨架屏代码转换为vue文件

  • 在项目中新建文件 src\pages\index\components\skeleton.vue

  • 将pages\index\index.skeleton.wxml中的代码复制到 skeleton.vue 中

  • 删除所有的注释和无接口访问的部分（如顶部的导航栏），如下图所示，通过 is 属性可以轻松辨别出各个组件对应的骨架屏代码。

  • scroll-view 标签也删除，只留接口更新内容的静态骨架屏代码
  • 在skeleton.vue的 template 标签外新建 style 标签
  • 将微信开发者工具生成的骨架屏相关的css代码 （pages\index\index.skeleton.wxss中）复制到项目文件 skeleton.vue的 style 标签中，删除所有的注释

最终范例代码如下：

src\pages\index\components\skeleton.vue

html 复制代码 
<template name="skeleton">
  <view is="components/SUI_Swiper">
    <view class="carousel Swiper--carousel">
      <swiper interval="3000" circular="true" current="0" autoplay="false">
        <swiper-item
          style="
            position: absolute;
            width: 100%;
            height: 100%;
            transform: translate(0%, 0px) translateZ(0px);
          "
        >
          <navigator class="navigator Swiper--navigator" hover-class="none" open-type="navigate">
            <image class="image Swiper--image sk-image" mode="aspectFill"></image>
          </navigator>
        </swiper-item>
      </swiper>
      <view class="indicator Swiper--indicator">
        <text class="dot Swiper--dot active Swiper--active"></text>
        <text class="dot Swiper--dot"></text>
        <text class="dot Swiper--dot"></text>
        <text class="dot Swiper--dot"></text>
        <text class="dot Swiper--dot"></text>
      </view>
    </view>
  </view>
  <view is="pages/index/components/CategoryPanel">
    <view class="category CategoryPanel--category">
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-543 sk-text"
          >居家</text
        >
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-231 sk-text"
          >锦鲤</text
        >
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-820 sk-text"
          >服饰</text
        >
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-396 sk-text"
          >母婴</text
        >
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-960 sk-text"
          >个护</text
        >
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-548 sk-text"
          >严选</text
        >
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-816 sk-text"
          >数码</text
        >
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-7 sk-text">运动</text>
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-68 sk-text">杂项</text>
      </navigator>
      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
        <image class="icon CategoryPanel--icon sk-image"></image>
        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-539 sk-text"
          >品牌</text
        >
      </navigator>
    </view>
  </view>
  <view is="components/SUI_Guess" class="r">
    <view class="caption Guess--caption">
      <text
        class="text Guess--text sk-transparent sk-text-0-0000-556 sk-text sk-pseudo sk-pseudo-circle"
        >猜你喜欢</text
      >
    </view>
    <view class="guess Guess--guess">
      <navigator class="guess-item Guess--guess-item">
        <image class="image Guess--image sk-image" mode="aspectFill"></image>
        <view class="name Guess--name sk-transparent sk-text-14-2857-479 sk-text"
          >极光限定 珠光蓝珐琅锅</view
        >
      </navigator>
      <navigator class="guess-item Guess--guess-item">
        <image class="image Guess--image sk-image" mode="aspectFill"></image>
        <view class="name Guess--name sk-transparent sk-text-14-2857-647 sk-text"
          >法式清新，长袖格纹连衣裙/衬衫110-160cm</view
        >
      </navigator>
    </view>
  </view>
</template>

<style>
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-484 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 43.1159rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-3-3333-275 {
  background-image: linear-gradient(
    transparent 3.3333%,
    #eeeeee 0%,
    #eeeeee 96.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 27.1739rpx;
  position: relative !important;
}
.sk-text-14-2857-543 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-231 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-820 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-396 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-960 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-548 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-816 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-7 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-68 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-539 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-0-0000-556 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 30.7971rpx;
  position: relative !important;
}
.sk-text-14-2857-479 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-647 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>

3. 导入并使用骨架屏vue文件

src\pages\index\index.vue

js 复制代码 
import Skeleton from './components/skeleton.vue'
js 复制代码 
// 默认显示骨架屏
const loading = ref(true)
onLoad(async () => {
  // 加载数据--所有接口同时开始刷新，直到耗时最长的接口返回数据
  await Promise.all([getSwiperInfo(), getCategoryInfo()])
  // 加载数据成功后，隐藏骨架屏，显示数据
  loading.value = false
})
相关推荐
90后的晨仔11 小时前
uni-app 项目目录结构全解：每个文件、每个文件夹的作用与配置详解
vue.js·uni-app
爱看老照片11 小时前
关于uniapp中单位rpx的注意点
uni-app·rpx
郑州光合科技余经理17 小时前
代驾系统架构拆解：订单链路、权限组织与私有化源码交付
开发语言·后端·算法·架构·系统架构·uni-app·php
2501_915921431 天前
详细解析，iOS 应用上架 App Store 的完整流程与指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918411 天前
Xcode调试iOS应用内存管理与优化，识别泄漏与性能监控指南
android·ios·小程序·uni-app·cocoa·iphone·xcode
波罗丁牌2 天前
uni-app 实现视频聊天、屏幕分享，支持Android、HarmonyOS、iOS
android·uni-app·音视频
前端l2 天前
uni‑app（Vue3+setup）开发微信小程序高频坑汇总
微信·uni-app
pan3035074792 天前
uniapp 不用发版也可以做到版本更新
uni-app
00后程序员张2 天前
使用Instruments工具深入分析iOS应用性能与启动时间优化
android·macos·ios·小程序·uni-app·cocoa·iphone
古韵2 天前
小程序上传进度条，还要自己监听 onProgressUpdate 吗？
前端·javascript·uni-app
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片09历年考研数学一、数学二、数学三真题试卷及答案PDF1000 Debian字符界面如何支持中文