vue 每次渲染完页面后div的滚动条保持在最底部的方法
实例如下:
//每次页面渲染完之后滚动条在最底部 updated:function(){ this.$nextTick(function(){ var div = document.getElementById('dialogue_box'); div.scrollTop = div.scrollHeight; }) }
//第一次页面渲染完之后滚动条在最底部 methods:function(){ this.$nextTick(function(){ var div = document.getElementById('dialogue_box'); div.scrollTop = div.scrollHeight; }) }
以上这篇vue 每次渲染完页面后div的滚动条保持在最底部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
您可能感兴趣的文章:
- vue.js-div滚动条隐藏但有滚动效果的实现方法
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
相关推荐
-
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由
-
vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐
-
vue 每次渲染完页面后div的滚动条保持在最底部的方法
实例如下: //每次页面渲染完之后滚动条在最底部 updated:function(){ this.$nextTick(function(){ var div = document.getElementById('dialogue_box'); div.scrollTop = div.scrollHeight; }) } //第一次页面渲染完之后滚动条在最底部 methods:function(){ this.$nextTick(function(){ var div = document.ge
-
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Angular ng-repeat遍历渲染 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-rep
-
vue 监听某个div垂直滚动条下拉到底部的方法
如下所示: this.$nextTick(() => { const el = document.querySelector('.act-not'); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el.scrollTop; const scrollHeight = el.scrollHeight; if ((offsetHeight + scrollTop) - scrollHeig
-
在vue.js渲染完界面之后如何再调用函数
目录 vue.js渲染完界面后调用函数 1.下面开始介绍下 2.运行之后 3.此时查询官方api文档发现 4.继续查询api文档发现 5.最终把watch和nextTick组合一起 6.运行后发现 vue渲染完成事件 vue里面本身带有两个回调函数 vue.js渲染完界面后调用函数 在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不准确. 使用过j
-
vue使用v-if v-show页面闪烁,div闪现的解决方法
在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>
-
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o
-
vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有到达底部,而是距离底部还有一点距离(一脸懵逼) 估计是动态加载数据时,数据还未加载,滚动条就已经执行,知道原因了,那就实践呗. 第二次尝试,利用vue的watch监控数据的改变,然后动态修改滚动条到顶部的距离
-
jQuery实现将div中滚动条滚动到指定位置的方法
本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div
-
Vue实现渲染数据后控制滚动条位置(推荐)
需求场景如下: 实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部.先来看看最终实现的效果 实现思路 渲染完数据后,通过refs对象获取消息容器的实际高度 将滚动条的设置到最底部 实现过程 sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置 this
-
浅谈vue异步数据影响页面渲染
今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错. 因此我希望能在所有请求都得到后再去做页面的渲染. 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染 2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染
随机推荐
- .net调用JScript脚本及JS url加密解密
- JS在可编辑的div中的光标位置插入内容的方法
- 用vbs在 HTA 内对脚本进行编码的方法
- angular-cli修改端口号【angular2】
- Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
- 正则表达式的多行模式与单行模式图文分析
- 在服务器上启用HTTPS的详细教程
- Linux中split大文件分割和cat合并文件详解
- JavaScript进阶教程(第一课)第1/3页
- JS实现随机乱撞彩色圆球特效的方法
- C语言 数组指针详解及示例代码
- 使用asp代码突破图片的防盗连
- linux shell之文件锁
- 自动定时备份sqlserver数据库的方法
- SQL优化基础 使用索引(一个小例子)
- 基于HTML+CSS+JS实现增加删除修改tab导航特效代码
- PHP+jquery+ajax实现分页
- C++ COM编程之什么是接口?
- Android使用RadioGroup实现底部导航栏
- 理解Java的序列化与反序列化