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

Vue.js 中滚动条始终定位在底部的方法

发布于 2020-2-23|

复制链接

分享一篇关于vue 中滚动条始终定位在底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧

滚动条定位在底部，首先想到的是，动态修改滚动条到顶部的距离等于div的高度，代码实现：

```javascript

var div = document.getElementById('data-list-content')

div.scrollTop = div.scrollHeight

```

但是问题来了，滚动条并没有到达底部，而是距离底部还有一点距离(一脸懵逼)估计是动态加载数据时，数据还未加载，滚动条就已经执行，知道原因了，那就实践呗。第二次尝试，利用vue的watch监控数据的改变，然后动态修改滚动条到顶部的距离代码实现：

```javascript

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更新时执行的，不正好符合我们的要求嘛(小激动)。代码实现：

```javascript

watch: {

'processData': 'scrollToBottom'

}

scrollToBottom: function () {

this.$nextTick(() => {

var div = document.getElementById('data-list-content')

div.scrollTop = div.scrollHeight

})

}

```

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

vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') ...
开发chrome 插件， background.js中 console log 看不到解决方法
开发chrome 插件, background.js中 console log 看不到解决方法参考文章: (1)开发chrome 插件, background.js中 console log 看不到 ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
js中的数组Array定义与sort方法使用示例
js中的数组Array定义与sort方法使用示例 Array的定义及sort方法使用示例 Array数组相当于java中的ArrayList 定义方法: 1:使用new Array(5 )创建数 ...
new Date将字符串转化成日期格式兼容IE，ie8如何通过new Date将字符串转化成日期格式，js中如何进行字符串替换， replace() 方法详解
new Date将字符串转化成日期格式兼容IE,ie8如何通过new Date将字符串转化成日期格式,js中如何进行字符串替换, replace() 方法详解 //获得年月日时分秒 //传入日期// ...
vue滚动条禁止_vue.js中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 思路是这样的,当弹窗弹出时候,让b ...
vuejs滚动条_Vue.js 桌面端虚拟滚动条|vue美化滚动条VScroll
介绍 VScroll 一款基于vue2.x构建的桌面PC端自定义模拟滚动条组件.支持自定义是否原生滚动条.自动隐藏.滚动条大小.层级及颜色等功能.拥有丝滑般的原生滚动条体验! 除了垂直滚动条,同样的也 ...
vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...
vue使用高德地图画电子围栏_Vue.js 中使用高德地图定位及渲染地图
看了github上面有集成的高德地图组件,但由于项目所要用到的不多,所以决定跟着文档写一写.运行环境是vue-cli webpack 引入高德地图一般用使用vue-cli webpack最简单粗暴的 ...

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

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

最新文章

热门文章