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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
通过实例了解js函数中参数的传递
Jun 15 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
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
浅谈python字符串方法的简单使用
2016/07/18 Python
大数据分析用java还是Python
2020/07/06 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
建议书范文
2015/02/05 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python