Vue的el-scrollbar实现自定义滚动


Posted in Python onMay 29, 2018

为什么要用el-scrollbar?

最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用 overflow: scroll; 啊!嗯嗯,又不是不能用!如果我不曾见过太阳,我本可以忍受黑暗。

大家总会见过不少滚动条比较优雅的实现,不可否认,美是让人愉悦的。所以这些年行走江湖我满怀愧疚,让大家见丑了。

为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库。我考虑的,首先项目用的框架是Vue,然后用的组件库是Element,Element官网也有很多滚动,而且像是Select组件的下拉框也是有滚动的,所以就不用想选择什么了,简简单单的就用Element自己的scrollbar吧,也不用再引入什么别的包或者文件之类的。

看Element的官网是不可能发现Scrollbar这个组件的,没有使用文档,但是可以直接使用。

为什么要写这一篇文章?

第一,有段时间没写东西了,先热热手;

第二,真的有同学不知道怎么用,可能主要是没有文档吧

Vue的el-scrollbar实现自定义滚动

先来看看它的样子。

Vue的el-scrollbar实现自定义滚动

看了效果,接着来看一下怎么找到这个组件,官方没有提供文档,但确实是直接可用的一个组件。为什么这么说,这个一会再聊。先稍微看一下Element项目一些基本的概念。

在Element的贡献指南里说了开发环境搭建和打包代码的指令。打包代码用 npm run dist ,我们去package.json中可以看到这个指令具体的操作。

Vue的el-scrollbar实现自定义滚动

我们简单看一下build/webpack.conf.js这个文件,会发现打包的文件入口是./src/index.js,我们再去看一下这个文件。里面内容除了包含给vue安装插件,原型上挂载对象之类的操作外,就是用插件的方式把Element组件给注册完成,当然也暴露出用安装包方式安装后要用的所有方法和属性。其实我们已经看到了Scrollbar的身影。再循着去看一下packages/scrollbar/index.js'这个文件,简单的把这个组件引入后,添加了一个install方法,提供给Vue的use方法使用,然后就直接export出来了。

Vue的el-scrollbar实现自定义滚动

去src/main.js这个文件,看一下组件接收的props:

Vue的el-scrollbar实现自定义滚动

native属性:如果为true就不显示el的bar,也就是el模拟出来的滚动条,如果为false就显示模拟的滚动条

关于tag这个属性,可以看一下el的Select组件中的应用。

Vue的el-scrollbar实现自定义滚动

画个图表示一下view和wrap这两个区域的区别:

Vue的el-scrollbar实现自定义滚动

尝试用一下

考虑到有些同学有时会打不开上面的链接,把代码贴出来。

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.9/lib/index.js"></script>
<div id="app">
 <h2>list:</h2>
 <el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false">
 <div v-for="value in num" :key="vlaue">
  {{value}}
 </div>
 </el-scrollbar>
</div>


CSS

@import url("//unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css");
#app {
 height: 300px;
 overflow: hidden;
}
/*展示列表的区域,超过200px出现滚动条*/
.list {
 max-height: 200px;
}


JavaScript

new Vue({
 el: "#app",
 data: {
 num: 30
 }
})

Element UI官方说不准什么时候就更新文档了,不过,真的可能是因为太简单了。

Python 相关文章推荐
python 采集中文乱码问题的完美解决方法
Sep 27 Python
深入理解Python对Json的解析
Feb 14 Python
Python爬虫之xlml解析库(全面了解)
Aug 08 Python
Python基于回溯法子集树模板解决取物搭配问题实例
Sep 02 Python
简单了解Django ContentType内置组件
Jul 23 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
Aug 10 Python
python爬虫实现获取下一页代码
Mar 13 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
Apr 27 Python
Python selenium使用autoIT上传附件过程详解
May 26 Python
教你怎么用Python监控愉客行车程
Apr 29 Python
浅谈Python数学建模之固定费用问题
Jun 23 Python
PyTorch device与cuda.device用法
Apr 03 Python
基于Django与ajax之间的json传输方法
May 29 #Python
django ajax json的实例代码
May 29 #Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
May 29 #Python
PyTorch学习笔记之回归实战
May 28 #Python
Django 使用Ajax进行前后台交互的示例讲解
May 28 #Python
Python实现爬虫爬取NBA数据功能示例
May 28 #Python
Django+Ajax+jQuery实现网页动态更新的实例
May 28 #Python
You might like
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP编程风格规范分享
2014/01/15 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
node.js学习总结之调式代码的方法
2014/06/25 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python中必要的名词解释
2019/11/20 Python
Python request操作步骤及代码实例
2020/04/13 Python
PyQt5实现登录页面
2020/05/30 Python
python 生成器需注意的小问题
2020/09/29 Python
django中cookiecutter的使用教程
2020/12/03 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
市场营销工作计划书
2014/05/06 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
校运会新闻稿
2015/07/17 职场文书
国家助学金受助感言
2015/08/01 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫