解决vue数据刷新后,若设置overflow:scroll,下拉进度条仍停留在上次位置问题
一、问题描述:
文案文字超出包裹它的div边界,将div设置为overflow-y:scroll,并下拉到最底部:
文章图片
点击切换周期,会请求相应周期这方面的数据;
文章图片
发现文案位置和上一次保持一致:
文章图片
二、分析问题
当新周期选择后,新旧虚拟dom会进行对比,然后更新真实dom。虚拟div为父节点不变,新虚拟文本节点会替换真实dom的文本节点。但div未发生改变,所以滚动进度条仍停留在在上一次位置。
文章图片
三、解决问题
给div增加一个自定义属性:
【解决vue数据刷新后,若设置overflow:scroll,下拉进度条仍停留在上次位置问题】
文章图片
在请求完数据后增加: this.freshKey = new Date().getTime() ,这样div的class属性新旧变得不一样,达到刷新dom的作用。
推荐阅读
- parallels|parallels desktop 解决网络初始化失败问题
- Docker应用:容器间通信与Mariadb数据库主从复制
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- SpringBoot调用公共模块的自定义注解失效的解决
- 解决SpringBoot引用别的模块无法注入的问题
- 使用协程爬取网页,计算网页数据大小
- Java|Java基础——数组