vue 中滚动条始终定位在底部的方法


Posted in Javascript onSeptember 03, 2018

滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于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 中滚动条始终定位在底部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
js实现自定义路由
Feb 04 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 #Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 #Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 #Javascript
解决vue.js this.$router.push无效的问题
Sep 03 #Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 #Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 #Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
You might like
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
python实现决策树ID3算法的示例代码
2018/05/30 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
香港零食网购:上仓胃子
2020/06/08 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
小学生手册家长评语
2014/04/16 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
清明节演讲稿
2014/05/27 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
七年级思品教学反思
2016/02/20 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技