vue项目修改滚动条样式

vue项目修改滚动条样式

这是我写的一个简单的效果，只是为了实现功能，具体样式样式可以根据自己的需求去写。

1. 首先需要先下载我们所需要的模块，这里我用的是“vuescroll”

    //老规矩，先安装模块
    npm install vuescroll

2. 在项目中进行导入

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

3. 引入(浏览器环境)

<!-- html -->
<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>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuescroll/dist/vuescroll.css" />

4. 使用

<!-- 组件的模板 -->
<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>
                    <li>dsfdsfdfg</li>
                    <li>dsfdsfdfg</li>
                    <li>dsfdsfdfg</li>
                    <li>dsfdsfdfg</li>
                    <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: {
                        keepShow:true
                    },
                    bar: {
                        hoverStyle: true,
                        onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
                        background: 'red',
                    }
                },
            }
        },
    }
</script>

然后效果就出来啦，如果还需要其他的配置可以参考vuescroll的api文档