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>

具体的接口文档请看这里
转自原作者