Shimmer加载效果在Vue里怎么实现才不卡顿？
我在用Vue做列表页的骨架屏，但加了Shimmer动画后页面明显变卡，尤其在低端手机上。是不是我的写法有问题？
我试过用CSS动画配合v-for渲染多个占位块，但一滚动就掉帧。下面是我现在的代码：
<template>
<div v-if="loading">
<div v-for="i in 5" :key="i" class="shimmer-item"></div>
</div>
<div v-else>真实内容</div>
</template>
<style>
.shimmer-item {
height: 60px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position: 200% 0; } }
</style>- 2
回答
22浏览
Vue项目中使用IntersectionObserver实现加载进度条导致滚动卡顿怎么办？
在Vue项目里想用IntersectionObserver检测关键资源加载进度，然后发现滚动时页面卡顿，特别是资源较多时更明显。我尝试给每个资源元素添加了观察器，然后在回调里计算总进度： const ...
- 2
回答
39浏览
Vue列表滚动卡顿，虚拟滚动没效果怎么办？
用Vue做商品列表页时，页面滚动特别卡顿，尝试用v-if做了虚拟滚动但没效果。 代码是这样写的：{ data() { return { items: Array.from({length: 200},...
- 2
回答
14浏览
鼠标跟随效果在Vue里怎么实现才不卡顿？
我用Vue写了个鼠标跟随的小圆点，但移动快了就明显掉帧，感觉很卡。是不是监听mousemove的方式不对？ 下面是我现在的代码，就是直接绑在document上更新坐标： <template>...
- 1
回答
28浏览
Vue按需加载Element组件样式不生效怎么办？
在用Vue项目按需加载Element组件时，按钮组件功能正常但样式完全没效果，折腾了一晚上没解决。按照文档配置了babel-plugin-component： plugins: [ require('...
- 2
回答
95浏览
Vue路由切换时的过渡动画导致页面卡顿怎么办？
最近在给Vue项目加路由过渡效果，用了transition标签做滑动切换，但发现每次路由变化时页面会卡顿半秒。尝试过把mode设成out-in，动画虽然顺眼了，但滚动位置会突然跳到顶部，而且新页面内容...
- 2
回答
35浏览
如何在Flutter中实现类似Vue的渐变动画效果？
最近在尝试从Vue转到Flutter开发，想实现一个按钮点击后颜色平滑过渡的效果。之前用Vue时很简单，直接使用CSS就能搞定。 <button @click="changeColor" :st...
- 1
回答
17浏览
Skeleton骨架屏在Vue中怎么实现动态高度？
我用Vue做列表加载，想加个骨架屏，但每个item的高度不一样，写死height又不灵活。 试过用:style="{ height: loading ? '60px' : 'auto' }"，但切换时...
- 1
回答
10浏览
Vue中图片懒加载不生效，是写法有问题吗？
我在用 Vue 3 做一个图片列表页，想用原生 Intersection Observer 实现懒加载，但滚动时图片根本没触发加载，一直显示 loading 占位图。我查了文档也加了 rootMarg...
- 1
回答
21浏览
Node.js 后端接口响应慢，前端 Vue 页面加载卡顿怎么办？
我用 Node.js 写了个接口，返回用户列表数据，但每次请求都要 2-3 秒，导致 Vue 页面白屏很久。已经试过加缓存，但效果不明显，是不是哪里写得不对？ 前端是用 Vue 3 + Axios 请...
- 1
回答
21浏览
预加载图片在Vue中怎么写才有效？
我在用Vue做图片轮播，想提前加载下一张图避免切换时白屏，但加了preload好像没起作用。试过在created里new Image()，也试过在template里加，都不行。 下面是我现在的写法，是...
关键点：
1. 改用绝对定位的伪元素做动画层，避免重绘整个元素
2. 透明度替代纯色变化，GPU渲染更友好
3. 动画属性用left而不是background-position
另外v-for的数量控制在3-5个就够了，多了照样卡。如果还不行的话...那就只能祭出终极大招：降低动画频率或者直接关掉低端机的动画，检测设备性能可以用navigator.hardwareConcurrency。