圆月山庄资源网 Design By www.vgjia.com
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度,
代码实现:
var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight
但是问题来了,滚动条并没有到达底部,而是距离底部还有一点距离(一脸懵逼)
估计是动态加载数据时,数据还未加载,滚动条就已经执行,知道原因了,那就实践呗。
第二次尝试,利用vue的watch监控数据的改变,然后动态修改滚动条到顶部的距离
代码实现:
watch: { 'processData': 'scrollToBottom' } scrollToBottom: function () { var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight }
再次崩溃了,好像没有毛用(陷入苦思)。
这个时候我想到了$nextTick 。
简单的介绍下$nextTick:
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 。
既然$nextTick是在下次DOM更新时执行的,不正好符合我们的要求嘛(小激动)。
代码实现:
watch: { 'processData': 'scrollToBottom' } scrollToBottom: function () { this.$nextTick(() => { var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight }) }
运行代码,成功了。
以上这篇vue 中滚动条始终定位在底部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,滚动条,定位底部
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年10月07日
2024年10月07日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]