Vue+vant使用skeleton组件实现骨架屏

最新推荐文章于 2025-05-12 21:45:49 发布

优雅的王德奥

最新推荐文章于 2025-05-12 21:45:49 发布

阅读量1.6w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：骨架屏 vue vant

本文链接：https://blog.youkuaiyun.com/weixin_42565137/article/details/97241424

效果演示

在这里插入图片描述
直接上代码

<template>
      <div class="skeleton" v-show="skeletonShow">
        <van-skeleton :row="3" row-width="160"

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

优雅的王德奥

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何在vue3使用骨架屏

sunhy007的博客

07-20

821

为什么要使用数据都都是ajax请求渲染来的然后它可能请求的慢就会一片白这不好所以就要使用骨架屏了站位像这样创建个组件 <template> <div class="xtx-skeleton shan" :style="{width:'100px',height:'50px'}">  <div class="block" :style="{backgroundColor:'black'}">&lt

vue-cli4+webpack4+vant搭建前端移动H5通用框架

破鞋何苦阑珊的博客

07-01

5954

vue-cli4+webpack4+vant搭建前端移动H5通用框架(开箱即用) 简介该框架是基于cli4 + webpack4 + vant + less的移动端H5通用框架，可供快速开发。在此之前需要了解一下一个移动端H5改包含哪些技术点：序号要点 1 cli-4 2 UI框架 vant 3 rem自适应 4 请求拦截封装 5 路由配置 6 登录校验 7 环境变量配置 8 webpack配置(vue.config.js) 9 弹窗封装(由于不同项目

1 条评论您还未登录，请先登录后发表或查看评论

轻量级骨架屏设计，让你的页面“薄荷清新”

你若盛开，清风自来

06-30

572

骨架屏是一个简单的占位图，用于在内容加载过程中给用户展示一个占位界面，让用户知道正在加载中。

骨架屏（vant插件）

最新发布

专注大前端

05-12

476

骨架屏（Skeleton Screen）是一种在页面加载过程中用于改善用户体验的设计模式。它通过在页面内容完全加载前，显示一个占位的界面来让用户感知页面正在加载，从而减少等待的焦虑感。

预加载 Skeleton Screen — 骨架屏

小平果的欢乐谷

03-17

8229

用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验。Skeleton ScreenSkeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页

前端骨架屏应用

kiscon的博客

12-05

4566

骨架屏的优势：用户避免看到长时间的白页；可以获知页面的大体结构，减小用户认为页面出错而离开的机率；视觉更加流畅。常见前端骨架屏方案、skeleton、draw-page-structure。

微信小程序使用vant框架以及简单处理骨架屏小计

qq_41552889的博客

05-27

2316

最近在研究微信小程序，发现一款ui框架want，在这里记录下使用方法，以及简单的处理骨架屏的方法 want小程序官方文档地址：https://youzan.github.io/vant-weapp/#/intro，第一步通过 npm 安装需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下（没有不要紧，先安装这个，后面细说）通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn a

css修改vant组件的样式

m0_66970349的博客

07-18

1106

此法适用于sass或less的样式穿透，两者方法均可。如果觉得去掉上面的scoped属性怕影响其他布局。如图，红色边框生效，但是最后也有一个，后面我们演示一下如何去掉。最后，效果如图，这样可以在组件原基础上进行覆盖和重新设置。Vant组件默认的设置如下，显示的是中间和下面的灰色边框。使用Vant等组件时，需要在局部组件中修改他们的样式。2.2 使用 /deep/ 或 :(deep)具体原因不太清楚，去掉就有效果，加上就没有效果。我设置的代码如下:可是页面没有任何变化。组件中间添加一个红色隔离边框。

Vue页面骨架屏注入方法

12-09

作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行，首屏加载的问题也在困扰着开发者们。那么有没有一个办法，也能让SPA用上骨架屏呢？这就是这篇文章将要探讨的问题。文章相关代码已经同步到 Github ，欢迎查阅~ 一、何为骨架屏简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。这个技术在一些以内容为主的APP和网页应用较多，

基于 vue-skeleton-webpack-plugin 的骨架屏实战

11-30

总的来说，本文通过`vue-skeleton-webpack-plugin`提供的功能，展示了在Vue项目中实现动态骨架屏的具体步骤，包括插件的安装、配置以及骨架屏组件的创建和使用。这为开发者提供了优化页面加载性能的一种有效方法，...

vue 移动端注入骨架屏的配置方法

10-16

骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下

vue-cli 构建骨架屏的方法示例

10-17

主要介绍了vue-cli 构建骨架屏的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

【Vue】1551- 使用Vite插件自动化实现骨架屏

pingan8787

01-01

1804

作者：橙红年代原文：https://juejin.cn/post/7152406737100734495骨架屏在SPA应用中有两个显著提升用户体验的作用避免页面初始化加载时的空白，体验介于SSR和完全等待页面初始化完成之间避免部分路由组件需要加载数据完成之后才渲染的空白骨架屏会给用户一种内容已经返回的错觉，只要稍加等待就能看见完整内容了，因此骨架屏的定位就是真实内容准备好之前的替身。之前研究过一种...

微信小程序自动生成骨架屏

drakseason的博客

12-25

791

写PR时有一个需求，需要在首页数据加载前先展示骨架屏，这时候第一时间想到的是uview组件库的 Skeleton 骨架屏，但是这种方法需要自己在插槽中写元素，首页的元素很多这种方法很复杂。我们只需要把两个文件的代码粘到对应的组件文件中即可（这里作者写的是uniapp项目，其他类型的同理）其实微信小程序官方提供了生成骨架屏功能，模拟器的右下角，点击三个点。接着点击生成骨架图，点击继续下去，这时候微信会生成两个文件。

vue项目骨架屏的使用

javaScript_want的博客

12-04

1071

1.使用vue-cli创建一个新项目 2.在index.html文件中div添加内容加载时会先显示div里面的内容等渲染完毕时在切换成路径组件内的内容先显示：加载完后显示：运行的流程就到这：接下来就轮到主角出场了 1.安装webpack插件npm install vue-skeleton-webpack-plugin 2.在src目录下创建Skeleton.vue <templa...

vant框架的使用

qq_46065861的博客

10-15

1285

我的有道云笔记一、通过脚手架安装vant 二、引入vant 2.1、方式一:按需引入(推荐) 步骤 1.安装vant 2.下载插件 3.在 babel.config.js 中配置 4.引入需要的标签,若只有一处使用，则在需要的页面引入，若多处使用，在main.js引入运行结果 2.2、方式二：手动按需引入组件 2.3、方式三：导入所有组件 Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。步骤 1.安装vant框架 2.mai

vue 添加骨架屏

qq_42451776的博客

10-02

365

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>kl-ui</t