获取带有轮播图的offsetTop值时遇到的问题

最新推荐文章于 2022-10-12 11:07:01 发布
最新推荐文章于 2022-10-12 11:07:01 发布
阅读量284 收藏
点赞数
分类专栏： 笔记 项目中的问题 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46076151/article/details/117409433
版权
在使用Vue.js时，若要实现滚动到一定位置显示tab-control标签，直接获取offsetTop值会因轮播图延迟加载导致不准确。解决办法是监听轮播图加载完成，只在首次加载完毕后计算tab-control的offsetTop值，确保值的准确性。
摘要由CSDN通过智能技术生成

问题描述：

当滚动到大于tab-control这个高度的时候让这个标签显示出来，这个时候需要获取tab-control的offsetTop值，直接获取这个组件的offsetTop值是不对的会发现很小，因为上面有一个轮播图，一般只有轮播图加载比较慢，所以我们只需要监听轮播图的加载就可以了，只要轮播图的图片加载完了，我们就可以计算tab-control的offsetTop值了。

解决方案：

监听轮播图加载完成@load=" imageload" 
imageload(){
   
this.$emit('swiperImageLoad')

因为轮播图里面有很多图片，加载一次就会发送一次 请求，但是

最低0.47元/天 解锁文章
天才小熊猫一号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
P177-解决吸顶效果-TabControl的offsetTop获取分析
m0_51414342的博客
12-31 516
首先把Home.vue原来的原生Js吸顶效果的样式删除 tabControl的吸顶效果 #### 9.1. 获取到tabControl的offsetTop *必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop *但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确. *如何获取正确的值了? *监听HomeSwiper中img的加载完成. *加载完成后, 发出事件, 在Home.vue中,...
调试手记: 获取 offsetHeight 导致页面卡顿
weixin_34268753的博客
07-31 404
问题描述 今天帮同事诊断一个巨大树形列表页渲染卡顿问题，具体现象为，使用 handlebar 渲染巨大的树形列表，全展开，前端卡顿 4 秒以上。 排查结果 首先，页面中有多个 tab 页，每个 tab 上都有一个巨大的树形列表，然而项目中的 tab 页实现方式是先全渲染出来，然后隐藏 inactive 的tab。 第二，也是卡顿关键的原因...
java攻克轮播图之深度了解偏移量
weixin_44387879的博客
01-14 416
偏移量 offsetParent用于获取定位的父级元素 offsetParent和parentNode的区别 var box = document.getElementById(‘box’); console.log(box.offsetParent); console.log(box.offsetLeft); console.log(box.offsetTop); console.log...
offsetTop获取元素到顶部的距离（累加）
yycc的博客
03-03 352
function getElementTop (el) { let actualTop = el.offsetTop; let current = el.offsetParent; while (current !== null) { actualTop += current.offsetTop; current = current.offsetParent; } return actualTop }
el-table设置表格高度自适应
@必意玲
02-24 1692
1. html <el-table ref="table" :data="tableData" :height="tableHeight"></el-table> 2. js export default { data(){ return { tableHeight: 50, tableData: [] } }, mounted:function(){ this.
获取offsetTop和offsetLeft值的js代码(兼容)
10-27
然而，在某些特殊情况下，直接获取offsetTop和offsetLeft属性值并不直接反映元素的实际位置，比如元素的父级元素有CSS的边距（margin）或者有其他定位影响时。为了准确获取元素的实际位置，需要编写兼容不同浏览器...
原生js获取left值和top值的三种方法
10-19
在JavaScript中，获取元素的`left`和`top`值对于实现动态效果，特别是涉及到绝对定位元素的操作，是非常重要的。以下将详细介绍三种原生JavaScript获取`left`和`top`值的方法。 ### 第一种方法：直接通过`style`...
解决Vue中mounted钩子函数获取节点高度出错问题
11-30
然而，正如问题描述中遇到的情况，尝试在`mounted`钩子中获取组件的`offsetTop`属性时，可能会遇到不准确的结果，特别是在新窗口打开页面时。 这个问题的核心在于JavaScript执行的异步性和资源加载顺序。在新窗口或...
js 获取浏览器高度和宽度值(多浏览器)
10-29
浏览器高度和宽度值获取方法汇总 在 Web 开发中，获取浏览器的高度和宽度值是非常重要的，因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而，浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...
el-table表格组件高度自适应通用方式
weixin_50227498的博客
06-15 1640
关于表格自适应有很多方案，一般逻辑都是获取窗口高度减去其他元素来实现。 尝试了很多，不管是普通场景还是，上下元素高度动态情况，都能很好的兼容。
获取offsetLeft，offsetTop值不准的原因
fwx02的专栏
12-17 5751
遇坑总结： 决定offsetLeft、offsetTop的唯一因素是当前节点和offsetParent节点的偏移关系。 也就是说只与offsetParent有关，那么怎么确定一个元素的offsetParent呢？ 一个元素的offsetParent可以是以下其中之一： 具有position属性（除了static值以为，而position默认值为static）的最近父元素； 最近的table，table cell父元素； 根节点元素； 设置了动画transform:translate的最近父元素；
.offset().top 与 .offsetTop
JennyChen66的博客
11-03 1864
.offset().top 与.offsetTop
获取offsetTop和offsetLeft的值（兼容）
Ga Ga Love Front
04-15 2896
function offsetTop( elements ){       var top = elements.offsetTop;       var parent  = elements.offsetParent;       while( parent != null ){           top += parent.offsetTop;           parent =
关于offsetTop和clientX和pageX的区别
Talljack 的博客园
10-08 999
$('.con').offset().top;//jq中offset（）是相对于视口 var con = document.getElementsByClassName('con')[0]; // console.log(con.offsetTop);//原生JS中若父级有定位，则相对与父级，若父级无定位，则相对于视口 // console.log(con.offsetWidth);//原生...
iview table高度动态设置
诗雨远方的博客
12-30 2万+
iview table高度动态设置     在使用iview table表格组件的时候，由于我的屏幕分辨率比较大，在自己pc机上设置的固定高度很适合，在测试（test）时候发现在别的终端如1368*768的机器上都显示不全，下面就把我的和其他机器上效果图做个对比，如图所示： 一、我的机器 二、别人的机器 三、解决办法
vue获取元素offsetTop，mounted获取不到offsetTop，获取元素距离页面顶边距离
weixin_65230316的博客
10-12 4173
通过官方的这张图片知道beforeUpdate阶段一定是mounted已经执行结束，在这个阶段能够正常获取到dom，如果没有触发beforeUpdate在data里加一个值手动修改触发。记录一下开发过程中遇到的坑，今天想做一个功能，当我评论完之后，页面跳到评论区顶部，于是就要获取到评论区距离页面顶部的距离，需要循环获取offsetTop来实现。随后用老办法获取距离顶边的距离然后存到vuex中来实现跨多级组件传递。解决：通过beforeUpdate阶段获取。
vue+el-table 根据屏幕大小动态设置height属性以固定表头
热门推荐
qq_42204033的博客
09-13 2万+
el-table需要固定表头时只要在标签里加上height属性就可以了，但是怎样根据屏幕大小自动调整height属性呢？ 解决办法：vue加载时计算下需要给table设置的height &lt;el-table ref="table" :data="info" :span-method="colspanMethod" :height="tableHeight"&gt; &lt;el-...
offsetTop，offset().top
GUYyyy的博客
10-30 985
原文：here offsetTop与offset().top相同点： 1.当无滚动条且offsetTop与offset().top参照对象相同时，它们获取的值相同。 offsetTop与offset().top不同点： 1.offset().top与offsetTop偏移量参照对象不同，offset().top始终是文档，而offsetTop参照的对象是可变的。 2.offsetTop获取的偏移量不随滚动条滚动变化，但offset().top随着滚动条变化（注意滚动监听的是一个有滚动条的元素，而不是wind
vue怎么改变offsettop的值
最新发布
05-18
要改变元素的 offsetTop 值，可以使用 JavaScript 或 Vue 的 $refs 属性。 1. 使用 JavaScript： 首先，通过 document.getElementById 或 document.querySelector 获取元素，然后可以使用元素的 offsetTop 属性来改变它的值。 例如： ```javascript const element = document.getElementById('my-element'); element.offsetTop = 100; // 将元素的 offsetTop 值设置为 100 ``` 2. 使用 Vue 的 $refs 属性： 在 Vue 中，可以通过 $refs 属性获取元素的引用，并使用元素的 offsetTop 属性来改变它的值。 例如： ```html <template> <div ref="myElement">Hello World</div> </template> <script> export default { methods: { changeOffsetTop() { this.$refs.myElement.offsetTop = 100; // 将元素的 offsetTop 值设置为 100 } } } </script> ``` 注意：在 Vue 中修改元素的 offsetTop 值并不会引起页面重新渲染，因此需要手动调用 $forceUpdate 方法来强制更新视图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值