脚本宝典收集整理的这篇文章主要介绍了vuescroll-一款基于vuejs2.x的虚拟滚动条,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Vuescroll 一个功能强大,有多种模式的基于Vue.js的滚动条插件,它的原理是创建 div 用于包裹要滚动的内容,操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。
设计它的目的是用来美化和增强你的滚动条。
你可以通过更改配置来选择不同的模式:
native
模式: 类似于原生的滚动条,但是可以自定义滚动条样式,使用于 PC 端用户。slide
模式: 允许你用手指或鼠标滑动内容, 可以滑动超出边界范围,适用于移动端端用户。你也可以通过更改配置滚动条的样式,包括:
透明度
高度/宽度
位置
背景色
是否保持显示
想了解更多请访问官方网站指南页面如果你不满足上述特性,想要扩展特性的话,请考虑贡献代码。
总的来说,Vuescroll 不仅仅只一个滚动条, 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。下面是部分预览效果。
颜色
、透明度
。可以设置滚动条是否保持显示
。在你的入口文件处:
import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-slide';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-native';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
把你需要滚动的内容用vuescroll
包裹起来即可
<template>
<div class='your-container'>
<!-- bind your configurations -->
<vue-scroll :ops="ops">
<div class='your-content'>
</div>
</vue-scroll>
</div>
</template>
<script>
export default {
data() {
return {
ops: {
// some configs....
}
}
}
}
</script>
附上项目的地址 希望朋友们多多star 哈哈
以上是脚本宝典为你收集整理的vuescroll-一款基于vuejs2.x的虚拟滚动条全部内容,希望文章能够帮你解决vuescroll-一款基于vuejs2.x的虚拟滚动条所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。