vue 滚动条样式插件vuescroll

安装插件

npm install vuescroll

在main.js中进行引入

import vuescroll from 'vuescroll';import 'vuescroll/dist/vuescroll.css';Vue.use(vuescroll);

使用方法,请注意设置vue-scroll的宽和高

<template><div class='your-container'><!-- bind your configurations --><vue-scroll :ops="ops" style="width:200px;height:100px"><ul class='your-content'><li>dsfdsfdfg</li><li>dsfdsfdfg</li><li>dsfdsfdfg</li><li>dsfdsfdfg</li></ul></vue-scroll></div></template><!-- 组件的模型 --><script>export default {// 组件的名称name: "car",data() {return {ops: {vuescroll: {},scrollPanel: {},rail: {background: '#01a99a',opacity: 0,size: '10px',specifyBorderRadius: false,gutterOfEnds: null, //轨道距 x 和 y 轴两端的距离gutterOfSide: '0', //距离容器的距离keepShow: false, //是否即使 bar 不存在的情况下也保持显示border:'none' //边框},bar: {hoverStyle: true, onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条background: 'red', //颜色}},}},}</script>

具体的接口文档请看这里