高质量 Vue.js 自定义美化滚动条VueScroll
今天再给大家分享一款超棒的Vue自定义虚拟美化滚动条组件VueScroll。
vuescroll 基于vue.js开发的适用于PC和移动端的自定义滚动条组件。支持上拉刷新/下拉加载及轮播图等功能。
特性
- 支持自定义滚动条、滚动轨道、滚动按钮等；
- 支持上拉刷新和下拉加载，并且可以自定义动画效果；
- 支持平滑地滚动；
- 支持轮播图；
安装
$ npm i vuescroll -S引入组件
- 全局引入
import Vue from 'vue';
import vuescroll from 'vuescroll';
// 你可以在这里设置全局配置
Vue.use(vuescroll, {
ops: {}, // 设置全局默认配置
name: 'myScroll' // 在这里自定义组件名字，默认是vueScroll
});
// 或者
Vue.use(vuescroll);
Vue.prototype.$vuescrollConfig = {
bar: {
background: '#353535'
}
};- 按需引入
<template>
<vuescroll> 内容区... </vuescroll>
</template>
<script>
import vuescroll from 'vuescroll';
export default {
components: {
vuescroll
}
};
</script>支持CDN方式引入
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>
<!-- 引入vuescroll-slide -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-slide.js"></script>
<!-- 引入vuescroll-native -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-native.js"></script>文档提供了非常丰富的参数配置。
so perfect！非常值得借鉴参考，提升下技术，需要的不要错过。
# 文档地址
https://vuescrolljs.yvescoding.org/
# 仓库地址
https://github.com/YvesCoding/vuescroll好了，基于vuescroll自定义滚动条就介绍到这里。希望大家能喜欢哈！
