VUE组件实现一个防抖动效果

最新推荐文章于 2024-05-26 11:00:00 发布
最新推荐文章于 2024-05-26 11:00:00 发布
阅读量887 收藏
点赞数
分类专栏： VUE web开发 JavaScript 文章标签： vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szuwaterbrother/article/details/106147740
版权
为解决HTML加载后因图片延迟导致的窗口抖动问题，本文介绍了在Vue中使用div包裹图片并设置百分比宽度的防抖动策略。通过绑定class到
元素，并利用padding-bottom撑开空间，避免了固定高度导致的比例不协调。同时，针对浏览器兼容性问题，提供了两种不同的样式写法。
摘要由CSDN通过智能技术生成

问题

  • 防抖动问题顾名思义，由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.
  • 如果固定死高度的话，又不能于宽等比例缩放

如果是vue里面出现这种问题要怎么解决

思路

  1. 给template加< div >套起来，然后绑定class=“wrape”
  2. 给wrape写百分比 让图片在文字出来前就能撑开一个空间（有浏览器兼容问题，所以待会介绍两种写法）

具体操作

  1. 先套个div

在这里插入图片描述

  1. 针对div的样式来写
    在这里插入图片描述
    注明：

这里宽和高是一个百分比的关系，但为什么不写width，因为这么写width传到了父级去了，所以要写一个padding-bottom去撑开

当然还有另外一种写法
在这里插入图片描述

这种写法就是有一个浏览器兼容问题

  1. 空白的一大片空间不好看，所以设一个background的颜色，灰色比较好看
    在这里插入图片描述
szuwaterbrother
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2 虚拟列表（优化版）
dengzeyuan的博客
03-20 955
3.向下滚动加载下一条数据时候卡在计算阈值内，导致底部留白太大，通过至多加载固定窗口对应展示数据的数量给追加到原本的结尾索引，达到多渲染一屏窗口的数据。虚拟列表是优化长列表的一种手段，防止列表存在过多的dom元素导致页面卡顿（包扣移动端下拉到底加载下一页这种列表加载的dom元素多了一样会卡）。用来存放数据，并且让他随着滚动条一起动，达到视觉上的列表滚动。2.当窗口的resize事件触发一切数值都重新计算，让列表底部样式不出错，和滚动到底部不抖动。
js实现前端无限滚动中的虚拟列表效果(只渲染可视区域，dom元素可复用)
HHH917的博客
08-26 6178
初次 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无限滚动(只渲染可视区域，dom元素可复用)</title> <meta name="viewport" content="initial-scale=1.0
一文带你高效实现Vue项目中的防抖与节流
最新发布
xingyu_qie的专栏
05-26 707
本文将深入探讨如何在Vue项目中高效实现防抖与节流，通过具体案例和最佳实践，帮助开发者精确掌控事件触发频率，从而实现高性能和高响应的用户界面。
使用vue实现防抖
qq_42850692的博客
03-16 5983
场景：当需要用输入框的输入的值进行实时验证或搜索时 // debounce.js export const debounce = (() => { let timer = null return (callback, wait) => { clearTimeout(timer) timer = setTimeout(callback, wait) } })() // test.vue <template> <div class="
vue项目添加animation动画-抖动效果案例
肖帅的博客
12-30 2089
vue项目添加animation动画效果，如下图所示 主要代码如下： <div class="lo-main" :class="[sharkFlag ?'my-shark' :'']" id="myShark"></div> mounted() { setTimeout(()=>{ this.sharkFlag = true; },2000) const sharkDiv = document.getElementById("myShark");
vue（vue动画与组件、过滤器、vue脚手架）框架
weixin_48764743的博客
10-22 175
04-VUE动画与组件 回顾 知识点回顾 动态样式 style 三目 数组 对象 class 三目 数组 对象 生命周期 beforeCreate created ​ beforeMount mounted ​ beforeUpdate updated ​ beforeDestroy destroyed 侦听器 watch:{ 侦听变量的名字(new_value,old_value){ }, 侦听变量的名
vue 防抖
m0_48940868的博客
05-18 186
问题现象描述 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bv4mfErd-1621309481121)(/img/bVcR4Qp)] 初级处理办法（没啥用） window.addEventListener("resize", () => { setTimeout(() => { // 需要执行的代码块 },500) }); 只是在里面套了个 setTimeout 这样的结果只是减少了图片闪的频率，但是还是会闪 常规处理办法（
Vue 侧滑菜单效果，实现分层缩放，类似旧版本的 QQ 菜单
07-18
总的来说，创建一个类似旧版QQ侧滑菜单的Vue组件涉及以下几个关键步骤：1) 创建组件结构；2) 添加触摸事件监听；3) 使用CSS过渡效果；4) 编写滑动逻辑；5) 根据需求处理菜单项的层级和缩放效果。通过这些步骤，你...
vue-debounce:防抖解决方案的简单易用指令
05-09
易于使用，只需将其放入vue实例并将其附加到输入/组件 自我调节无需担心，设置并忘记它 支持多种时间格式（毫秒和秒） 输入键支持可在用户按下所需输入中的Enter键时自动触发所需功能（也可以禁用） 支持具有多个...
vue自定义指令实现v-tap插件
09-01
Vue.js 是一款流行的轻量级前端框架，它允许开发者通过组件化的方式构建应用程序。在Vue中，自定义指令...在实际项目中，开发者可以根据需求进一步优化和扩展，比如添加防抖动处理、处理多个同时存在的`v-tap`等。
Vue.js 中的实用工具方法【推荐】
10-16
Vue.js是一个流行的前端JavaScript框架，它不仅提供了声明式的数据绑定和组件化的开发方式，而且还内置了一些实用的方法，以便开发者可以方便地处理常见问题。本文将详细介绍一些在Vue.js开发过程中可以使用到的实用...
Vue0.1的过滤代码如何添加到Vue2.0直接使用
12-11
对于一些更复杂的过滤器，如`debounce`，这实际上不是一个简单的过滤器，而是一个高阶函数，用于防抖动处理。通常，你会在组件的`methods`选项中使用它来包装你的事件处理函数，而不是在模板中直接使用。 ```...
Vue防抖（三种方式）
热门推荐
qq453660983的博客
06-14 2万+
Vue防抖（三种方式）
在vue中如何实现防抖功能？
qq_34528147的博客
05-18 994
vue中有个非常好用的工具库。
消灭前端闪烁魔鬼：Vue中的防抖术
前端全栈大佬
11-18 5836
本文将深入研究Vue中的防抖动技术。我们将首先介绍什么是防抖动，以及它在前端开发中的重要性。然后，我们将详细讨论Vue中如何实现防抖动，以及在实际项目中如何应用这一技术来优化用户体验。
vue项目中使用全局自定义指令实现防抖和节流，防止频繁调用接口
weixin_51938803的博客
04-21 3957
vue项目中使用全局自定义指令实现防抖和节流，防止频繁调用接口
vue实现防抖、节流
qq156831414的博客
09-30 1473
防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。节流通常用在比防抖刷新更频繁的场景下，而且大部分是需要涉及动画的操作。场景：input输入时进行查询。节流：指连续触发事件但是在 n 秒中只执行一次函数。场景：按钮点击、下拉加载、鼠标滚动、拖拽动画
vue防抖功能如何实现
weixin_35748962的博客
12-29 452
Vue 防抖功能可以通过设置一个计时器来实现。具体来说，防抖功能可以用于限制事件(如键盘输入、窗口调整大小、滚动等)在一定时间内只能触发一次。 具体实现方法如下： 在组件的 methods 中定义一个计时器，如： methods: { timer:null, debouncedMethod: function () { // 在这里实现你的方法 } } ...
Vue数字翻牌组件实现向上滚动效果
在Vue组件中，`<template>`部分定义了DOM结构，此处创建了一个`<view>`容器，包含一个`<ul>`列表，列表内有7个`<li>`元素，每个`<li>`元素内部又包含10个`<span>`元素，用于显示数字。`v-for`指令用于循环遍历并生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值