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

    千次阅读 2019-07-15 09:56:40
    一种自动化生成骨架屏的方案:https://github.com/Jocs/jocs.github.io/issues/22 vant插件骨架屏:https://youzan.github.io/vant/#/zh-CN/skeleton

    显示如图:
    在这里插入图片描述
    index.vue

    <template>
      <div class="hello">
    
        <div v-if="isLoad">
          <van-skeleton title :row="5" style="margin-top:50px" v-for="item in 3" :key="item"/>
    
          <div class="loading">
            <img style="" src="../assets/loading.png" alt="">
          </div>
        </div>
    
        <div v-else>
          <div v-for="item in 3" :key="item" style="margin-top:40px">
            <p>Skeleton 骨架屏</p>
            <p>将loading属性设置成false表示内容加载完成,此时会隐藏占位图,并显示Skeleton的子组件段落占位图宽度,
              可传数组来设置每一行的宽度段落占位图行数头像占位图大小通过title属性显示标题占位图,通过row属性配置占位段落行数</p>
          </div>
        </div>
    
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isLoad: true
        }
      },
      mounted() {
        // 静态数据,所以用了计时器。正式项目中不用这样做
        setTimeout(function(){
          this.isLoad = false;
        }.bind(this),3000)
      }
    };
    </script>
    
    <style scoped>
      p{
        font-size: 14px;
        line-height: 28px;
        margin:0;
        padding: 0 15px;
      }
      
      .loading img{
            position: fixed;
            width:42px;
            height:42px;
            margin:-21px 0 0 -21px;
            top: 50%;
            left: 50%;
            z-index: 99;
            animation:rotate .6s infinite linear;
            -webkit-animation:rotate .6s infinite linear;
        }
        @keyframes rotate{
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
        @-webkit-keyframes rotate{
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
    </style>
    
    

    main.js

    //引入vant插件
    import vant from 'vant'
    import 'vant/lib/index.css'
    
    Vue.use(vant)
    
    npm install vant -S
    

    一种自动化生成骨架屏的方案:https://github.com/Jocs/jocs.github.io/issues/22

    vant插件骨架屏:https://youzan.github.io/vant/#/zh-CN/skeleton

    展开全文
  • 主要介绍了vue-cli 构建骨架屏的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 最近在研究微信小程序,发现一款ui框架want,在这里记录下使用方法,以及简单的处理骨架屏的方法 want小程序官方文档地址:https://youzan.github.io/vant-weapp/#/intro, 第一步 通过 npm 安装 需要注意的是 ...

    最近在研究微信小程序,发现一款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 add @vant/weapp --production

    安装 0.x 版本

    npm i vant-weapp -S --production

    第二步 构建 npm 包
    打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件(如果没有构建npm选项建议更新微信开发者工具)

    tps:点击构建npm出现没有找到可以构建的npm

    插入图片描述
    解决方法:1、找到小程序文件夹的根目录,执行 npm init 一直回车回车。。。

    2、执行npm i @vant/weapp -S --production

    执行完再去小程序里面执行构建npm包就可以了

    步骤三 修改 app.json
    将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。

    步骤四 项目中使用ui组件(以button为例)
    1、在页面的json文件里引入button组件
    在这里插入图片描述
    2、wxml文件里写入组件

    在这里插入图片描述
    使用骨架屏小总结

    1、什么是骨架屏?

     骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。
    

    在这里插入图片描述
    2、在vant中使用骨架屏
    官网地址(官网比我写的详细一万倍):https://youzan.github.io/vant-weapp/#/skeleton
      tps1:修改固定样式(修改每一行的高度,这个在官方文档里面没有说明)
    在这里插入图片描述
    tps2:在验证效果时最好写个定时器来看效果,官方文档写法效果不明显
    在这里插入图片描述

    展开全文
  • Vue+vant使用skeleton组件实现骨架屏

    万次阅读 2019-07-25 10:25:15
    效果演示 直接上代码 < template > < div class = "skeleton" v - show = "skeletonShow" > < van - skeleton ...Vant还是非常好用的 https://youzan.github.io/vant/#/zh-CN/intro

    效果演示

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

    <template>
          <div class="skeleton" v-show="skeletonShow">
            <van-skeleton :row="3" row-width="160" />
            <van-skeleton :row="3" row-width="160" />
            <van-skeleton :row="3" row-width="160" />
          </div>   
    </template>
    
    <style scoped lang="scss">
    .skeleton {
      .van-skeleton {
        display: inline-block;
        width: 50px;
        margin: 0px 22px;
        .van-skeleton__content {
          width: 50px;
        }
        .van-skeleton__row {
          height: 50px;
          margin: 17px 0px;
        }
      }
    }
    </style>
    

    使用场景

    https://github.com/pppercyWang/vue-typescript-mobile

    Vant还是非常好用的

    https://youzan.github.io/vant/#/zh-CN/intro

    展开全文
  • 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 今天我们就讲一下,如何在Vue3中...

    前言

    骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 今天我们就讲一下,如何在Vue3中封装骨架效果

    为什么需要骨架屏?

    • 当用户刚打开网页的时候,后台还没有返回数据,页面没有办法渲染。
    • 如果用户正好网络状态不是很好,如果页面什么都不显示的话,用户极有可能直接选择退出了。
    • 骨架屏可以起到一个占位的作用,用户看到后就能知道此处有内容正在加载。

    二、如何封装?

    通过插件的方式,注册为全局组件。
    类似elementUIvant等组件库中,都有骨架屏的效果展示,不太理解的小伙伴儿可以去看看。
    element官网:骨架屏(PC端)
    vant官网:骨架屏(移动设备)

    1. 准备组件

    src/components文件夹中新建一个skeleton.vue的文件:
    代码如下(实例)

    <template>
      <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
        <!-- 1 盒子-->
        <div class="block" :style="{backgroundColor:bg}"></div>
        <!-- 2 闪效果 xtx-skeleton 伪元素 --->
      </div>
    </template>
    <script>
    export default {
      name: 'XtxSkeleton',
      // 使用的时候需要动态设置 高度,宽度,背景颜色,是否闪下
      props: {
        bg: {
          type: String,
          default: '#efefef'
        },
        width: {
          type: String,
          default: '100px'
        },
        height: {
          type: String,
          default: '100px'
        },
        animated: {
          type: Boolean,
          default: false
        }
      }
    }
    </script>
    <style scoped lang="less">
    .xtx-skeleton {
      display: inline-block;
      position: relative;
      overflow: hidden;
      vertical-align: middle;
      .block {
        width: 100%;
        height: 100%;
        border-radius: 2px;
      }
    }
    .shan {
      &::after {
        content: "";
        position: absolute;
        animation: shan 1.5s ease 0s infinite;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(
          to left,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 0.3) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-45deg);
      }
    }
    @keyframes shan {
      0% {
        left: -100%;
      }
      100% {
        left: 120%;
      }
    }
    </style>
    

    2.注册为插件

    在同一文件夹下新增一个index.js文件,代码如下:

    // 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。
    // 这就是插件
    // vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
    // vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展
    
    import XtxSkeleton from './xtx-skeleton.vue'
    
    export default {
      install (app) {
        // 在app上进行扩展,app提供 component directive 函数
        // 如果要挂载原型 app.config.globalProperties 方式
        app.component(XtxSkeleton.name, XtxSkeleton)
      }
    }
    

    然后再mian.js中全局导入

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import './mock'
    import XtxUI from './components/library'
    
    import 'normalize.css'
    import '@/assets/styles/common.less'
    // 插件的使用,在main.js使用app.use(插件)
    createApp(App).use(store).use(router).use(XtxUI).mount('#app')
    

    在组件中使用骨架的效果

    代码如下

    <template>
      <!-- 筛选区 -->
      <div class="sub-filter" v-if="conditions.length && brands.length && !loading">
        <!-- 品牌条件 -->
        <div class="item">
          <div class="head">品牌:</div>
          <div class="body">
            <a
              @click="selectedBrans = item.id"
              :class="{ active: selectedBrans === item.id }"
              href="javascript:;"
              v-for="item in brands"
              :key="item.id"
              >{{ item.name }}</a
            >
          </div>
        </div>
        <!-- 规格条件 -->
        <div class="item" v-for="item in conditions" :key="item.id">
          <div class="head">{{ item.name }}:</div>
          <div class="body">
            <a
              @click="item.selectedProp = tag.id"
              :class="{ active: item.selectedProp === tag.id }"
              href="javascript:;"
              v-for="tag in item.properties"
              :key="tag.id"
              >{{ tag.name }}</a
            >
          </div>
        </div>
      </div>
      <div v-else class="sub-filter">
        <XtxSkeleton class="item" width="800px" height="40px" />
        <XtxSkeleton class="item" width="800px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
      </div>
    </template>
    <script>
    import { findSubCategoryFilter } from '@/api/category.js'
    import { useRoute } from 'vue-router'
    import { watch, ref } from 'vue'
    
    export default {
      name: 'SubFilter',
      setup (props, { emit }) {
        const route = useRoute()
        const conditions = ref([])
        const brands = ref([])
        const selectedBrans = ref(null)
        const loading = ref(false)
        // 动态路由组件默认是缓存的
        watch(
          () => route.params.id,
          newVal => {
            // 仅仅监听二级分类的id
            if (route.fullPath !== `/category/sub/${route.params.id}`) return
            // 接口正在调用,此时应该显示骨架屏
            loading.value = true
            findSubCategoryFilter(newVal).then(ret => {
              // 给每一种规格的左侧添加【全部】
              ret.result.saleProperties.forEach(item => {
                // 记录每一种规格选中的值
                item.selectedProp = null
                item.properties.unshift({
                  id: null,
                  name: '全部'
                })
              })
              conditions.value = ret.result.saleProperties
              // 记录品牌的选中状态
              // ret.result.brands.selectedBrand = null
              // 给品牌的左侧添加【全部】
              ret.result.brands.unshift({
                id: null,
                name: '全部'
              })
              brands.value = ret.result.brands
              // 接口调用成功后,隐藏骨架屏
              loading.value = false
            })
          },
          {
            immediate: true
          }
        )
        watch(
          [selectedBrans, conditions],
          () => {
            // 同时侦听多个值:品牌的侦听;规格的侦听
            // console.log(selectedBrans)
            // console.log(conditions)
            const attrs = []
            conditions.value.forEach(item => {
              // 获取选项的name值
              // console.log(item)
              const tagInfo = item.properties.find(tag => tag.id === item.selectedProp)
              console.log(tagInfo)
              attrs.push({
                groupName: item.name,
                propertyName: tagInfo.name
              })
            })
            // 传递到父组件
            emit('update-filter', {
              brandId: selectedBrans.value,
              attrs: attrs
            })
          },
          {
            deep: true
          }
        )
        return { conditions, brands, loading, selectedBrans }
      }
    }
    </script>
    <style scoped lang="less">
    // 筛选区
    .sub-filter {
      background: #fff;
      padding: 25px;
      .item {
        display: flex;
        line-height: 40px;
        .head {
          width: 80px;
          color: #999;
        }
        .body {
          flex: 1;
          a {
            margin-right: 36px;
            transition: all 0.3s;
            display: inline-block;
            &.active,
            &:hover {
              color: @xtxColor;
            }
          }
        }
      }
    }
    </style>
    

    效果图如下面
    在这里插入图片描述
    2. 应用场景介绍
    可以在需要用到的地方,循环生成。等后台数据返回后,将骨架屏组件替换掉即可。

    展开全文
  • 骨架屏技术讲解以及使用方法写在前面骨架屏实现方式(原理分析)实现方式(具体实现) 写在前面 现在的前端开发领域,都是前后端分离,前端框架主流的都是 SPA,MPA;这就意味着,页面渲染以及等待的白屏时间,成为...
  • 2. 欢迎页 骨架屏 3. 地区定位 加载地区热映电影 即将上映 top250 4. 电影搜索 5. 电影详情 6. 影人详情 7. 跳转到电影网站观看电影 8. 电影收藏(想看,看过) 9. 歌单查看 10. 全屏播放器...
  • 如何在vue3使用骨架屏

    2021-07-20 01:06:34
    数据都都是ajax请求渲染来的 然后它可能请求的慢就会一片白 这不好 所以就要使用骨架屏了 站位 像这样 创建个组件 <template> <div class="xtx-skeleton shan" :style="{width:'100px',height:'50px'}"&...
  • Vue灵活骨架屏组件封装

    千次阅读 2019-03-05 14:19:11
    骨架屏,就要精准定制才行组件源码及其完整示例,戳这里
  • 如何在微信小程序内实现骨架屏效果 https://gitee.com/minchangyong/skeletons
  • vue优化之骨架屏

    千次阅读 2018-11-27 15:43:04
    可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容...
  • 商品分类Classify: <template> <div> ...-- vant侧边导航 --> <van-sidebar style="height: 617px; white-space: nowrap; overflow-y: scroll;" v-model="activeKey">
  • Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。 一.vant下载命令: npm i vant - S 查看是否安装成功: package.json里: 二.vant可用于轮播图特效和下拉刷新数据 main.js里引入 ...
  • 使用CSS自定义属性构建骨架屏

    千次阅读 2018-10-27 10:04:03
    几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享一下使用CSS自定义属性构建骨架屏...
  • *@ course Behavior及计算属性computed 、分包、基础库版本兼容、骨架屏、发布 *@ author 杨亚月 *@ time 2021/05/12 **/ 一、知识点回顾 二、作业讲解 三、组件代码特性共享Behavior及计算属性computed 1....
  • 接着上篇loading效果继续说,最开始为了解决页面加载有几秒钟的空白用的是loading加载动效,在 网上查资料学习的过程中又了解到有一个骨架屏,可以理解为页面预加载,就是在页面在加载的过程当中先呈现给用户一个...
  • vue简单实现骨架屏

    2021-07-03 15:25:10
    vue实现页面加载占位 效果如下 思路与实现   页面加载时用户等待,此时与用户交互的方式通常有等待层、进度条、加载动画等;本次介绍加载占位,把页面即将展示的样子用css背景展示出来,等数据返回后即可进行页面...
  • 可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容...
  • 1.加载页面引入封装的骨架屏组件 <div v-if="isLoad"> <article-skeleton></article-skeleton> </div> <div v-else>此处为加载完成后需要显示的内容</div> import ...
  • vue-skeleton-webpack-plugin这是一个基于 vue 的 webpack 插件,为单页和多页应用生成 skeleton,提升首展示体验。 安装 1.在package.json文件引入依赖 "vue-skeleton-webpack-plugin": "^...
  • 骨架屏 (Skeleton Screen)

    2020-04-22 13:59:00
    https://blog.csdn.net/lmh_19941113/article/details/87979419
  • 小程序van-skeleton 骨架屏效果json 部分引入html 部分;js 部分 效果 json 部分引入 html 部分; <view class="container"> <view style="width:100rpx;height:100%;margin:0 auto;margin-top:516rpx;...
  • 骨架屏demo

    2020-12-24 17:45:58
    css版本 <!DOCTYPE html> <... <...link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-
  • antd vue 中 关于骨架屏 skeleton 中嵌套form 出现表单内容无法渲染问题 问题描述 根据官方文档,在使用骨架得时候,内部嵌套得表单,其实目的是为了实现,预加载得时候,loading得效果,数据加载完成之后,在显示...
  • 因业务需求要用到滚动加载,就用到了vant组件库里的List组件,然后突发奇想封装了个骨架屏进去,api和使用方法还有文档都参考了vant的list组件,不过没有参考源码,此组件是我第一次封装,比较贴合自身业务,所以不...
  • 目录前言一、为什么需要骨架屏?二、如何封装?1. 准备组件2. 注册为组件3. 注册为插件三、 如何使用?1. 使用演示2. 应用场景介绍总结 前言 有很多时候,我们在浏览网页的时候,因为网络原因,没有办法第一时间...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 196
精华内容 78
关键字:

vant骨架屏