投稿

VueScroll–高质量Vue.js自定义美化滚动条

Vedu • • 资源分享 • 阅读 2120
今天再给大家分享一款超棒的Vue自定义虚拟美化滚动条组件VueScroll。

高质量 Vue.js 自定义美化滚动条VueScroll

vuescroll 基于vue.js开发的适用于PC和移动端的自定义滚动条组件。支持上拉刷新/下拉加载及轮播图等功能。

高质量 Vue.js 自定义美化滚动条VueScroll

特性

  • 支持自定义滚动条、滚动轨道、滚动按钮等；
  • 支持上拉刷新和下拉加载，并且可以自定义动画效果；
  • 支持平滑地滚动；
  • 支持轮播图；
高质量 Vue.js 自定义美化滚动条VueScroll

安装

$ 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>
高质量 Vue.js 自定义美化滚动条VueScroll

支持CDN方式引入

<script src="https://unpkg.com/vue">script>
<script src="https://unpkg.com/vuescroll">script>

<script src="https://unpkg.com/vuescroll/dist/vuescroll-slide.js">script>

<script src="https://unpkg.com/vuescroll/dist/vuescroll-native.js">script>
高质量 Vue.js 自定义美化滚动条VueScroll
高质量 Vue.js 自定义美化滚动条VueScroll

文档提供了非常丰富的参数配置。

高质量 Vue.js 自定义美化滚动条VueScroll
高质量 Vue.js 自定义美化滚动条VueScroll
高质量 Vue.js 自定义美化滚动条VueScroll
高质量 Vue.js 自定义美化滚动条VueScroll
高质量 Vue.js 自定义美化滚动条VueScroll

so perfect！非常值得借鉴参考，提升下技术，需要的不要错过。

# 文档地址
https://vuescrolljs.yvescoding.org/

# 仓库地址
https://github.com/YvesCoding/vuescroll

好了，基于vuescroll自定义滚动条就介绍到这里。希望大家能喜欢哈！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/17231.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-12-10 07:37
下一篇 2020-12-10 07:38

相关推荐

发表评论

登录后才能评论