骨架屏、数据加载前动画

梦里梦外; 2021-07-24 21:44 442阅读 0赞

内容加载前，页面显示内容框架,即骨架屏
    	
    	先svg画出框架,使用v-if/v-show,当无数据时,显示骨架屏

![在这里插入图片描述][2020051516350119.png]

加载动画
    	v-if/v-show,在加载结合前使用,图片得用动画实现运动效果

![在这里插入图片描述][2020051516393069.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]骨架屏代码示例:

<div class='mid_swiper' v-if='categorys.length'>
           <div class='swiper'>
              <van-swipe class="my-swipe"  indicator-color="orange">
                <van-swipe-item v-for="(items,index) in categoryArr" :key='index'>
                  <div class='cont'>
                   <div v-for="(item,index2) in items" :key='index2' class='con'>
                       <img :src="require(`./imgs/nav/${index2+1}.jpg`)" alt="" >
                       <span>描述</span>
                   </div>
                 </div>
                </van-swipe-item>
              </van-swipe>
    
           </div>
        </div>
    
        <img src="./imgs/nav/msite_back.svg" alt="" v-else/>

[2020051516350119.png]: /images/20210724/bd7c4b710c5a4b6198f8bc16e8969faf.png
[2020051516393069.png]: https://img-blog.csdnimg.cn/2020051516393069.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/cd2c915e21c443f894a07d12b0c5d0ea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，442人围观）

还没有评论，来说两句吧...

相关阅读

相关骨架屏技术讲解以及如何在Vue中实现骨架屏

骨架屏技术讲解以及如何在Vue中实现骨架屏写在前面骨架屏是什么如何实现（原理分析）一个生动的例子实现方式（具体实现）

爱被打了一巴掌/ 2023年06月28日 15:24/ 0 赞/ 38 阅读

相关骨架屏组件

一般情况下，在首屏数据未拿到之前，为了提升用户的体验，会在页面上展示一个loading的图层，但是会有一段时间显示白屏；因此为了更进一步优化用户体验，就有了骨架屏；在页面

清疚/ 2023年06月17日 11:58/ 0 赞/ 3 阅读

相关液体加载动画

液体加载动画 ![在这里插入图片描述][20210418201110488.gif_pic_center] <!DOCTYPE html> <html>

我就是我/ 2023年01月13日 10:55/ 0 赞/ 149 阅读

相关微信小程序实现骨架屏和图片懒加载

前言概述由于常用的getBoundingClientRect()会导致页面重排和滚动事件频发触发，所以本文介绍的是使用IntersectionObserver对象实现图

逃离我推掉我的手/ 2022年11月27日 08:51/ 0 赞/ 168 阅读

相关 CSS_css骨架屏

![在这里插入图片描述][20210410100003744.png] <!DOCTYPE html> <html lang="en"> <

蔚落/ 2022年11月17日 13:59/ 0 赞/ 178 阅读

相关 jquery ajax 加载数据的时候异步显示加载动画

http://blog.csdn.net/szstephenzhou/article/details/39318415 ajax加载后台数据就不说的那么细了。看下面

悠悠/ 2022年08月20日 13:23/ 0 赞/ 194 阅读

相关滚屏加载--无刷新动态加载数据技术的应用

[http://www.helloweba.com/view-blog-152.html][http_www.helloweba.com_view-blog-152.html]

Myth丶恋晨/ 2022年07月03日 23:45/ 0 赞/ 181 阅读

相关预加载 Skeleton Screen — 骨架屏

用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代

桃扇骨/ 2022年05月29日 04:56/ 0 赞/ 226 阅读

相关前端骨架屏终极方案——骨架图

骨架图代替骨架屏。用图片代替骨架屏！！！主要还没尝试过自动生成方案，手工写感觉太麻烦（美工已经操起了板砖。。。）最简单的实现方式，拿页面的UI效果图（或者直接手机截屏）

我就是我/ 2021年10月15日 02:45/ 0 赞/ 914 阅读

相关骨架屏、数据加载前动画

内容加载前，页面显示内容框架,即骨架屏先svg画出框架,使用v-if/v-show,当无数据时,显示骨架屏 ![在这里插入图片描述][2020

梦里梦外;/ 2021年07月24日 21:44/ 0 赞/ 443 阅读