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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
js本地图片预览实现代码
Oct 09 Javascript
JS验证字符串功能
Feb 22 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 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
PHP 网页过期时间的控制代码
2009/06/29 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jQuery live
2009/05/15 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
理解python中生成器用法
2017/12/20 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
财会自我鉴定范文
2013/12/27 职场文书
文秘人员工作职责
2014/01/31 职场文书
交通事故代理词范文
2015/05/23 职场文书
小人国观后感
2015/06/11 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
分享python函数常见关键字
2022/04/26 Python