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去除重复字符串两种实现方法
Jan 09 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
用React Native制作一个简单的游戏引擎
May 27 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编码规范之注释和文件结构说明
2010/07/09 PHP
微信支付开发订单查询实例
2016/07/12 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
angular6的table组件开发的实现示例
2018/12/26 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
中学生自我评价范文
2015/03/03 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python