el-scrollbar 异步请求后导致滚动无效

这篇博客讲述了在前端开发中遇到的一个问题:当数据异步加载后,滚动条未显示。作者发现滚动条在第二次加载(动态组件且有keep-alive)时才出现。为了解决这个问题,他们使用了一个定时器方法,在文档加载完成后再调用更新滚动条的方法。此外,还提到了在定时器内部使用箭头函数可以保持`this`的正确指向。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原本直接读取data里的数据,一切正常,当异步之后,滚动条没有了

<el-scrollbar ref="scrollDiv">
				<ul class="fwprod-total clearfix" ref="fwAll" :style="{width:allWidth + 'px'}">
					<li class="fwprod-total-item" v-for="(item,index) in fwtotal" :key="index"
						:style="'transfrom:translateX('+item.translateNum + 'px)'" ref="fwItem">
						<span class="fwprod-total_num block">{{item.cpnum}}</span>
						<span class="fwprod-total_icon block">
							<img class="fwprod-total_img" :src="item.cpimg" />
						</span>
						<span class="fwprod-total_name block">{{item.cpName}}</span>
					</li>
				</ul>
			</el-scrollbar>

:style="{width:allWidth + 'px'}" 因为会根据这个异步数据的个数,来计算这个宽度,页面源码看上去的确是已经改变了,单是滚动没有,只能拉鼠标。。。

this.$refs.scrollDiv.update()

文档给的这个当时加上也没有生效,无意中前端妹子发现,第二次加载的时候(动态组件,有keep-alive),滚动条出来了

最后加了个恶心方法

mounted() {
			
			var timer1 = setInterval(()=> {
			    if (document.readyState === 'complete') {
			        this.$refs.scrollDiv.update()
			        window.clearInterval(timer1)
			    }
			}, 500)

		},

解决问题了。。坑了几个小时

注意

setInterval(()=> {})  这里面能直接用this

setInterval(function {})    这里面不能直接用this

### 解决 `el-scrollbar` 组件在内容修改后滚动条高度未自动更新的问题 当使用 VueElement UI 的 `el-scrollbar` 组件时,如果动态更改其内部的内容,则可能会遇到滚动条未能及时响应这些变化并调整自身高度的情况。为了确保每次内容发生变化时都能正确计算和显示滚动区域的高度,可以采取以下几种方法。 #### 方法一:强制刷新 Scrollbar 实例 通过访问组件实例的方法来手动触发重新布局操作是一个有效的解决方案。可以在数据变更之后调用该函数以通知组件重新测量尺寸: ```javascript this.$nextTick(() => { this.$refs.scrollbar.update(); }); ``` 此代码片段应当放置于任何可能引起 DOM 变化的逻辑后面,比如列表项增加或删除后的钩子内[^1]。 #### 方法二:监听窗口大小改变事件 有时页面上的其他部分也会影响 `el-scrollbar` 所处容器的实际可用空间,因此还需要考虑外部因素带来的影响。可以通过侦听全局 resize 事件,在浏览器视口宽度发生变动时同样执行一次更新动作: ```javascript mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { this.$nextTick(() => { if (this.$refs && this.$refs.scrollbar) { this.$refs.scrollbar.update(); } }); } } ``` 这种方法能够保证即使是在复杂的应用场景下也能维持良好的用户体验[^2]。 #### 方法三:设置固定的最大高度 对于某些特定情况下的应用来说,给定一个明确的最大允许高度可能是最简单直接的办法之一。这样做的好处是可以避免频繁地去检测和处理各种潜在的变化源,从而简化开发流程。只需为包裹 `el-scrollbar` 的父级元素设定合适的样式即可实现这一目标: ```css .content { width: 100%; height: 100%; } ul { height: 100%; max-height: 150px; } ``` 上述 CSS 规则适用于那些希望保持一致外观设计的同时又不想过多依赖 JavaScript 来控制行为的情形[^3]。 综上所述,针对不同需求可以选择合适的方式来解决问题,并且可以根据实际情况组合运用多种策略达到最佳效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值