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 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
前后端如何实现登录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
session 的生命周期是多长
2006/10/09 PHP
十天学会php之第一天
2006/10/09 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python实现图片彩色转化为素描
2019/01/15 Python
详解python itertools功能
2020/02/07 Python
Python日志syslog使用原理详解
2020/02/18 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
利用python生成照片墙的示例代码
2020/04/09 Python
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
应届生法律求职信
2013/10/22 职场文书
服装厂厂长职责
2013/12/16 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
初二生物教学反思
2014/02/03 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
毕业生面试求职信
2014/06/23 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
新党章的学习心得体会
2014/11/07 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS