vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法

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

vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法相关推荐

vue watch 修改滚动条_Vue.js 中滚动条始终定位在底部的方法
Vue.js 中滚动条始终定位在底部的方法发布于 2020-2-23| 复制链接分享一篇关于vue 中滚动条始终定位在底部的方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧滚 ...
vue 数组对象提取_vue中使用对象数组的最佳实践
前言: 在平常的开发中,经常会在vue中用到对象数组,如渲染一个小区的列表,数据结构可能如下所示: CommunityList: [ { _id: '', community_code: '', co ...
html里按钮始终在底部,详解footer始终位于网页底部的方法介绍
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
vue 方法里面修改样式_vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. .swiper-contain ...
vue 固定div 滚动_vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ r ...
vue中怎么点击修改文字_vue中如何实时修改输入的值
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
vue 传递对象路由_vue中路由参数传递可能会遇到的坑
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习 ...
vue项目统一响应_vue中使用$set实现深入响应式原理
前言:其实使用vue的都知道,vue声明在data中的属性都是响应式的,也就是,我们在修改data中的属性时,一般页面都能实时更新.但是由于 JavaScript 的限制,Vue 不能检测数组和对象的 ...
html字幕滚动条,html中滚动条的代码是什么？如何设置html滚动条？
本篇文章主要介绍了关于html中的滚动条的代码,还有关于html 滚动条代码marquee标签属性的用法,具体的让我们一起来看这篇文章吧首先我们介绍html中的滚动条代码: 今天我们介绍这个html ...

vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法

vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法相关推荐

最新文章

热门文章