vuejs滚动条_vuescroll-一款基于vuejs2.x的虚拟滚动条
介绍
Vuescroll 一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div 用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
设计它的目的是用来美化和增强你的滚动条。
你可以通过更改配置来选择不同的模式:
native 模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。
slide 模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。
你也可以通过更改配置滚动条的样式,包括:
透明度
高度/宽度
位置
背景色
是否保持显示
想了解更多请访问官方网站指南页面
如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
总的来说,Vuescroll 不仅仅只一个滚动条, 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。
预览
在线 Demo & 文档
你可以浏览这个 repo 的根目录下的 Demo 文件夹。
详细的 Demo, 文档: 请访问 官方地址.
特点
基本特点
支持自定义滚动条,包括可以设置滚动条/轨道的颜色、透明度。可以设置滚动条是否保持显示。
支持平滑滚动,可以通过设置easing来获得不同的滚动动画。
支持自动检测内容是否发生变化,可以查看这个demo。
只在 slide 模式下有效的特点
支持下拉刷新和上推加载,具体可以查看这个demo和这个 SSR 版本的demo。
支持截断配置,每次滚动固定的距离。可以查看这个 demo
支持分页。可以查看这个 demo
其他特点
支持 SSR, 可以查看这个 demo
快速开始
引入
在你的入口文件处:
import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
为了去掉不会用到的部分,可以分开地引入 vuescroll
只引入 slide 模式的特性
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-slide';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
只引入 native 模式的特性:
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-native';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
用法
把你需要滚动的内容用vuescroll包裹起来即可
export default {
data() {
return {
ops: {
// some configs....
}
}
}
}
指南列表
最后
附上项目的地址 希望朋友们多多star 哈哈
vuejs滚动条_vuescroll-一款基于vuejs2.x的虚拟滚动条相关推荐
- vuejs滚动条_Vue.js 桌面端虚拟滚动条|vue美化滚动条VScroll
介绍 VScroll 一款基于vue2.x构建的桌面PC端自定义模拟滚动条组件.支持自定义是否原生滚动条.自动隐藏.滚动条大小.层级及颜色等功能.拥有丝滑般的原生滚动条体验! 除了垂直滚动条,同样的也 ...
- jeecgboot前端开发_一款基于代码生成器的Java快速开发平台【jeecg-boot】
原标题:一款基于代码生成器的Java快速开发平台[jeecg-boot] 今天给大家介绍一个后台脚手架框架:jeecg-boot 来看看官方怎么介绍的. 一款基于代码生成器的Java快速开发平台!全新 ...
- Jeecg-Boot 一款基于SpringBoot 快速开发平台
Jeecg-Boot 一款基于SpringBoot 快速开发平台 Jeecg-Boot 是一款基于SpringBoot+代码生成器的快速开发平台!采用前后端分离架构:SpringBoot,Mybati ...
- svelte-scrollbar: 基于svelte.js自定义滚动条组件|svelte3虚拟滚动条
基于svelte3.x构建轻量级自定义pc端虚拟滚动条组件SvelteScrollbar.支持原生滚动条.自动隐藏.垂直+水平滚动.自定义尺寸/颜色及间隔等功能. 在lib目录下新建Scrollbar ...
- gnome硬盘分析_三款基于GUI和终端的实用Linux磁盘扫描工具
[51CTO.com快译]扫描计算机硬盘主要出于两个原因:一个原因是分析硬盘,找出文件系统的不一致或错误.引起这些问题的可能因素包括:持续的系统崩溃,关键的系统软件关闭不当,更主要的是破坏性程序(比如 ...
- nmap 命令行执行错误_Unimap:一款基于Nmap实现的扫描速度提升工具
Unimap Unimap是一款基于Nmap实现的扫描速度提升工具,我们只需要提供一个IP地址给Unimap,即使是大量数据,Unimap也能够以非常快的速度完成网络扫描.Unimap是"U ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- 13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
最新文章
- SpringBoot实现热部署(修改class不需要重启)
- java orm 工具_GitHub - donnie4w/jdao: jdao是一个java的轻量级orm工具包
- 1.4 以查询取代临时变量
- iOS - PassData
- 测试-LoadRunner
- apple pay充游戏后退款_iOS退款内幕
- ydui滚动加载:TypeError: Cannot read property '$emit' of undefined
- 破解md5加密的方法
- ubuntu16.04之间实现桌面共享
- pycharm 运行celery_调试celery遇到的坑
- 万能PDF转换迅捷PDF转换成Word转换器评测
- 如何在 Android 上恢复删除屏幕截图/照片的四种方式
- JAVA工程师面试题目大全_绝对值得看
- 微星GT77HX-13VI2023原厂Windows11重建F3一键恢复msirestore功能
- 自动解锁Bitlocker加密硬盘
- Java培训出身,今获阿里Android岗offer,大专学渣的“登天”之路!
- 宇宙起源的奥秘与引力波的发现
- 屏幕适配和百分比布局
- 网站建设基础-使用if和switch分别输出今天为周几
- Visio 2007 大括号
热门文章
- Marketing Cloud的contact merge机制
- SAP OData的CSRF校验开关
- 通过kubeless命令行部署Kyma Lambda Function
- Code Issues 2,637 Pull requests 0 Projects 1 Wiki Security Insights Settings 使用filter node快速找到XML f
- where used list repository table WBCROSSGT
- 如何在Marketing Cloud里创建extension field扩展字
- 在Visual Studio Code里进行Java开发
- Initial load DNL_CUST_PROD0 并找出SAP S4表和CRM表的mapping关系
- SAP CRM和C4C的订单Number range
- SAP CRM WebClient UI Selenium UiElementHandler的实现