el-scrollbar 使用说明
官网地址：Element - 网站快速成型工具 - 中文
el-scrollbar
element-ui 的滚动条组件 ，官方文档上面是没有介绍这个组件的。
效果图：
简单使用：
<template><div style="height:768px;"><el-scrollbar style="height:100%"><ul><li style="height: 300px;" /><li style="height: 300px;" /><li style="height: 300px;" /><li style="height: 300px;" /></ul></el-scrollbar></div>
</template>注意：
1. 在使用时要必须设置外层容器高度。
2. 并且要设置el-scrollbar 的高度为100%。将需要滑动的 html 代码包裹起来。
如果需要去掉水平滚动条，需要添加下面样式：
.el-scrollbar__wrap{overflow-x: hidden;
}进阶使用：
使用 el-scrollbar 包裹 router-view 时，router-view 显示 的路由发生改变时，滚动条不会复位到页面的顶部。查看 el-scrollbar 组件的源码，得到最佳解决方案如下。el-scrollbar 源码在页面底部，有兴趣的可以看看。如有问题，欢迎评论！
最佳解决方案：
<template><div><el-menu :default-active="activeIndex" :router="true" class="el-menu-demo" mode="horizontal"><el-menu-item index="/processingCenter">处理中心</el-menu-item><el-submenu index="/workbench"><template slot="title">我的工作台</template><el-menu-item index="/workbench/option1">选项1</el-menu-item><el-menu-item index="/workbench/option2">选项2</el-menu-item><el-submenu index="/workbench/option3"><template slot="title">选项3</template><el-menu-item index="/workbench/option3/option1">选项1</el-menu-item><el-menu-item index="/workbench/option3/option2">选项2</el-menu-item></el-submenu></el-submenu><el-menu-item index="/messageCenter" disabled>消息中心</el-menu-item></el-menu><div style="height: 500px;"><el-scrollbar ref="scrollbar" style="height: 100%"><router-view /></el-scrollbar></div></div>
</template><script>
export default {name: 'ScrollRouterView',data() {return {activeIndex: '1'}},watch: {// 检测 当前路由地址的变化, 路由地址发生改变时, router-view 显示的路由改变时需要将滚动条复位到顶部'$route.path'(newValue, oldValue) {console.log(oldValue, typeof oldValue, '$route.path oldValue')console.log(newValue, typeof newValue, '$route.path newValue')// 通过 ref 拿到 el-scrollbar 的实例对象( vue 实例对象)const scrollbar = this.$refs.scrollbar// scrollbar 的实例对象相当于在 el-scrollbar 组件里面的 thisconst wrap = scrollbar.$refs.wrap// $refs.wrap 是 el-scrollbar 组件里的 ref='wrap', 是一个 domwrap.scrollTo(0, 0)}},created() {},methods: {}
}
</script><style lang="scss">
.el-scrollbar__wrap{overflow-x: hidden;
}
</style>
el-scrollbar 使用说明相关推荐
- Vue中的hellow world描述el与data的基本使用--Vue知识点归纳(一)
本文中将描述: 第一个Vue程序的开发使用 Vue 中的属性 el 基本使用说明 Vue 中的属性 data 操作数据使用说明 1 Vue 中的hellow world <!DOCTYPE ht ...
- swiper监听滚动条_swiper Scrollbar滚动条组件详解
本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下 1.scrollbar 为Swiper增加滚动条.类型:object. 2.el scrollbar ...
- 【Auto.JS】Autojs官方提取文档使用说明函数 (2)
接上一篇文章:Autojs官方提取文档使用说明函数 (1) Images Stability: 2 - Stable images模块提供了一些手机设备中常见的图片处理函数,包括截图.读写图片.图片剪 ...
- 辰华宏命令(Macro Command)使用说明
辰华宏命令(Macro Command)使用说明 1. 打开CHI测试程序,如下图所示,依次点击Control→Macro Command- 2. 出现 "Macro Command Box ...
- elementUI 源码-打造自己的组件库，系列五：Scrollbar组件
先上车 来吧继续阅读组件源码,Scrollbar 滚动条组件安排上 不知道elementUI官方文档上为何没有这个组件,一起来看看这个被雪藏的组件吧 先说感受:对不起,是我肤浅了,滚动条组件又秀到我了 ...
- Taglib原理和实现：再论El和JST
作者: WalkingWithJava 出处: Java研究组织 问题:你想和JSTL共同工作.比如,在用自己的标签处理一些逻辑之后,让JSTL处理余下的工作. 看这个JSP例子: <% Str ...
- abaqus高性能服务器怎么用,高性能计算平台ABAQUS任务调度使用说明作者陈林E-Mailchenlin.PDF...
高性能计算平台ABAQUS任务调度使用说明作者陈林E-Mailchenlin.PDF 高性能计算平台ABAQUS 任务调度使用说明 作者:陈林 E-Mail:chenlin@ 日期:2017-1-10 ...
- linux 文件拷贝并替换,Linux_cmd replace 文件替换使用说明，帮助信息： 复制代码 代码如 - phpStudy...
cmd replace 文件替换使用说明 帮助信息: 复制代码 代码如下: 替换文件. REPLACE [drive1:][path1]filename [drive2:][path2] [/A] [ ...
- js去el的map_转：el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容 后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
- JSP中是EL表达式与JSTL
EL语法:${ } EL取值来自于作用域对象 1.如何从指定作用域取值(默认从最小作用域取值) pageScope.requestScope.sessionScope.applicationScope ...
最新文章
- Socketserver 笔记
- python 笔记：读取mat文件
- formal method
- Linux下Anaconda3安装及使用教程
- 【杭州】Hack for Cloud Beginner微软黑客松大赛
- mybatis association 问题
- css之多行文本输出
- 201621123083 《Java程序设计》第9周学习总结
- Spring context:annotation-config/ 说明
- Maven的下载安装和环境配置
- SpringBoot+Mybatis实现三级分类联动
- 2021年中国果蔬汁行业供需分析：产量同比增长2.4%[图]
- HTML常用标签详解
- Luogu3387 缩点
- Lte/5G中的RSRP、RSRQ、SINR、MCS介绍
- Python turtle库的应用实例——画大白（情人节表白神器）
- 4：Qt Ui遇到高分屏字体显示问题
- 奶牛专题2：奶牛晒衣服
- Python+tkinter库实现简单图书管理系统
- mysql错误1064_mysql 1064异常原因及解决方法